Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > WebsitePainter
WP Site Using Lightbox Effect

kkelly
Registered User
Quote
2011-05-19 06:19:04

I added a lightbox effect to a WP gallery using Leandro Vieira Pinho's jQuery Lightbox method and thought I'd let you know how I did it.

1. Downloaded his zip at http://leandrovieira.com/projects/jquery/lightbox/

2. Installed his 'css', 'js' and 'images' directories into my project folder.

3. Added the following inside the head tags of my page


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox();
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />


4. And in the wsp_slideshow.js file, changed the for loop in the wsp_slideshow constructor to...


for (var i=0; i<imageArr.length; ++i)
{
// Adding the 'href' for the lightbox method
var aElem = document.createElement('a');
aElem.setAttribute('href',imageArr[i] );
aElem.setAttribute('rel','lightbox');
maindiv.appendChild(aElem);

var imgelem = document.createElement('img');
imgelem.src = imageArr[i];
imgelem.style.position = 'absolute';
imgelem.style.top = '0';
imgelem.style.left = '0';
imgelem.style.display = i == 0 ? 'block' : 'none';
aElem.appendChild(imgelem);

this.images.push(imgelem);
}


5. Make sure the css for my 'body' tag had the body at 100% width and height for it to work correctly on IE, otherwise it was fine on Chrome and Firefox.

6. Change the 'zIndex' ordering to make sure the last shown image is always behind the current image. I changed a bit of the code in the

wsp_slideshow.prototype.gotoNextFrame = function()

method from this...

this.images[this.currentFrame].style.display = 'block';
this.images[this.lastShownFrame].style.display = 'block';

to this

this.images[this.currentFrame].style.display = 'block';
this.images[this.currentFrame].style.zIndex = 1;
this.images[this.lastShownFrame].style.display = 'block';
this.images[this.lastShownFrame].style.zIndex = 0;


It can be seen on my wife's site at www.annekellyart.com. She made the entire site herself with Website Painter which she loves using. I just add small functionality now and again.

Happy coding


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Internatio?al" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact