jquery-lightbox-another image gallery

[ruebenwurzel]

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  

Have fun with your "new" imagegallery with lightbox.

Matthias

Edit: added forgotten images folder

[gelöscht durch Administrator]

[Argos]

Do you have a demo somewhere? 

[ruebenwurzel]

Hello,

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

Matthias

[Argos]

Nice! Thanks for sharing!

[Stefek]

Nice indeed.
Pictures can be displayed with js off too. In a standard Window, but a good fallback.

Thanks for sharing too.

R,
Stefek

[maverik]

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 

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

[Argos]

Colorbox works like a charm, thanks!