Author Topic: jquery-lightbox-another image gallery  (Read 5135 times)

Offline ruebenwurzel

  • Betatester
  • *
  • Posts: 8271
  • Keep on Rockin
    • Familie Gallas Online
jquery-lightbox-another image gallery
« on: March 25, 2010, 12:03:00 PM »
Hello,

to show how easy the included jquery in WB 2.8.1 can be used in modules, here the howto to integrate lightbox in the module "Another Image Gallery".

Basically you only have to add one file (frontend.js) with the lightbox scripts in it, add the css to frontend.css and adapt on value in view.php of another image gallery.

Step 1:
download the attached frontent.zip, unzip it to frontend.js and upload the "frontend.js" to modules/imagegallery.

Step 2:
download the attached images.zip, unzip it to images and upload the images folder with the five images in it to modules/imagellery

Step 3:
add the following css at the end of modules/imagegallery/frontend.css
Code: [Select]
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}

Step 4:
Change line 61 in /modules/imagegallery/view.php from
Code: [Select]
$inline = true;to
Code: [Select]
$inline = false;
Step 5:
activate jquery in the index.php of your template by changing the following code from
Code: [Select]
<?php
if(function_exists(&#39;register_frontend_modfiles&#39;)) {
  
register_frontend_modfiles(&#39;css&#39;);
  
register_frontend_modfiles(&#39;js&#39;);
?>
to:
Code: [Select]
<?php
if(function_exists(&#39;register_frontend_modfiles&#39;)) {
  
register_frontend_modfiles(&#39;css&#39;);
  
register_frontend_modfiles(&#39;jquery&#39;);
  
register_frontend_modfiles(&#39;js&#39;);
?>

(!have a look that jquery is loaded before js!)

That's all  :-D

Have fun with your "new" imagegallery with lightbox.

Matthias

Edit: added forgotten images folder

[gelöscht durch Administrator]
« Last Edit: March 25, 2010, 03:03:18 PM by ruebenwurzel »

Offline Argos

  • Posts: 2536
    • Argos Media
Re: jquery-lightbox-another image gallery
« Reply #1 on: March 25, 2010, 05:39:06 PM »
Do you have a demo somewhere?  :-D
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
Showcase (mostly WB): http://www.argosmedia.nl/pages/actueel/portfolio.php
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline ruebenwurzel

  • Betatester
  • *
  • Posts: 8271
  • Keep on Rockin
    • Familie Gallas Online
Re: jquery-lightbox-another image gallery
« Reply #2 on: March 25, 2010, 06:25:49 PM »
Hello,

demo can be looked here: http://www.runaway-music.de/band/bilder/bahnhof10.php

Matthias

Offline Argos

  • Posts: 2536
    • Argos Media
Re: jquery-lightbox-another image gallery
« Reply #3 on: March 25, 2010, 06:29:34 PM »
Nice! Thanks for sharing!
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
Showcase (mostly WB): http://www.argosmedia.nl/pages/actueel/portfolio.php
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline Stefek

  • Posts: 6139
  • ("ړ)
Re: jquery-lightbox-another image gallery
« Reply #4 on: March 25, 2010, 07:16:52 PM »
Nice indeed.
Pictures can be displayed with js off too. In a standard Window, but a good fallback.

Thanks for sharing too.

R,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline maverik

  • Posts: 1572
  • ..:: viva los tioz ::..
Re: jquery-lightbox-another image gallery
« Reply #5 on: March 26, 2010, 02:06:07 AM »
great work mathias  :-)

for all colorbox lovers here the solution for using another image gallery with colorbox.

step1

aktivate jquery like explanation above

step2

download and install colorbox modul 0.6 from my site http://www.websitebaker.net/pages/downloads.php

step3

edit like ruebenwurzel said line 61 in view.php from

Code: [Select]
$inline = true;
to

Code: [Select]
$inline = false;
enjoy  :-D

the goal of colorbox is that pictures will shown as slideshow which you can start and stop

if you want change the design from colorbox read my german tutorial http://www.websitebaker.net/pages/topics/die-colorbox-als-modul-snippet.php, there are 5 designs inside colorbox modul folder

colorbox 0.5 can be updatet with 0.6. if it dont work after install reload modules.

demo http://www.websitebaker.net/pages/labor/galerien/imgcbox.php?dir219=%2Fzoo
« Last Edit: March 26, 2010, 02:23:04 AM by maverik »

Offline Argos

  • Posts: 2536
    • Argos Media
Re: jquery-lightbox-another image gallery
« Reply #6 on: March 26, 2010, 04:26:50 AM »
Colorbox works like a charm, thanks!
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
Showcase (mostly WB): http://www.argosmedia.nl/pages/actueel/portfolio.php
----------------------------------------------------------------
Please don't request personal support, use the forums!

 

postern-length