WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => jQuery => Topic started by: ruebenwurzel on March 25, 2010, 12:03:00 PM

Title: jquery-lightbox-another image gallery
Post by: ruebenwurzel 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]

Title: Re: jquery-lightbox-another image gallery
Post by: Argos on March 25, 2010, 05:39:06 PM

Do you have a demo somewhere?  :-D

Title: Re: jquery-lightbox-another image gallery
Post by: ruebenwurzel on March 25, 2010, 06:25:49 PM

Hello,

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

Matthias

Title: Re: jquery-lightbox-another image gallery
Post by: Argos on March 25, 2010, 06:29:34 PM

Nice! Thanks for sharing!

Title: Re: jquery-lightbox-another image gallery
Post by: Stefek 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

Title: Re: jquery-lightbox-another image gallery
Post by: maverik 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

Title: Re: jquery-lightbox-another image gallery
Post by: Argos on March 26, 2010, 04:26:50 AM

Colorbox works like a charm, thanks!