Welcome, Guest. Please login or register.
Did you miss your activation email?
September 03, 2014, 07:57:35 AM

Login with username, password and session length
Search:     Advanced search
Interested in joining the WebsiteBaker team?
For more Information read here or on our new website.
180970 Posts in 24683 Topics by 6512 Members
Latest Member: WebBuilder
* Home Help Search Login Register
Pages: [1]   Go Down
Print
Author Topic: jquery-lightbox-another image gallery  (Read 4278 times)
ruebenwurzel
Betatester
*
Offline Offline

Posts: 8244



WWW
« 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:
/**
 * 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:
$inline = true;
to
Code:
$inline = false;

Step 5:
activate jquery in the index.php of your template by changing the following code from
Code:
<?php
if(function_exists(&#39;register_frontend_modfiles&#39;)) {
  
register_frontend_modfiles(&#39;css&#39;);
  
register_frontend_modfiles(&#39;js&#39;);
?>
to:
Code:
<?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  grin

Have fun with your "new" imagegallery with lightbox.

Matthias

Edit: added forgotten images folder
« Last Edit: March 25, 2010, 03:03:18 PM by ruebenwurzel » Logged
Argos

Offline Offline

Posts: 2510


WWW
« Reply #1 on: March 25, 2010, 05:39:06 PM »

Do you have a demo somewhere?  grin
Logged

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!
ruebenwurzel
Betatester
*
Offline Offline

Posts: 8244



WWW
« 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
Logged
Argos

Offline Offline

Posts: 2510


WWW
« Reply #3 on: March 25, 2010, 06:29:34 PM »

Nice! Thanks for sharing!
Logged

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!
Stefek

Offline Offline

Posts: 5927



« 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
Logged

"Master-pieces are accomplished through mastered pieces."
"If you change the way you look at things, the things you look at change."  – Wayne W. Dyer
“Fair exchange is the basis of all successful activity.”
maverik
Betatester
*
Offline Offline

Posts: 1574



« Reply #5 on: March 26, 2010, 02:06:07 AM »

great work mathias  smiley

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:
$inline = true;

to

Code:
$inline = false;

enjoy  grin

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 » Logged
Argos

Offline Offline

Posts: 2510


WWW
« Reply #6 on: March 26, 2010, 04:26:50 AM »

Colorbox works like a charm, thanks!
Logged

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!
Pages: [1]   Go Up
Print
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!