Question

I bought a template, that I’ve been editing in Dreamweaver.
I wanted to add the pop-up function that lightbox has, and tried on my own but can’t figure it out.

I could use some step-by-step instructions explained to an idiot..(i.e. a ‘this code goes in line 26’ type deal)…if you feel like explaining why, that’d be awesome too, so this way i can learn what’s going on in my template’s coding…

The jquery lightbox plugin I was using is the leandro vieira one, and below is the code for one of the particular pages on my site. I don’t know if you need to also edit any of the .js files .css files? am i providing enough info for you to help me? Anyway, any help is really appreciated.

Answer 1

Download the zip file from

http://leandrovieira.com/projects/jquery/lightbox/

Find the file jquery.lightbox-0.5.pack.js and stick it in your js folder in your project.

After the existing line

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

put the line

<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>

Find the css file in the zip, jquery.lightbox-0.5.css, and put it in your css folder.

After the existing line:

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">

put the line

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Replace the line:

<img src="images/spec_offer1.jpg" alt="" />

with

<a class="lightbox" href="spec_offer1.jpg"><img src="spec_offer1_thumb.jpg" alt=""/></a>

(you have to create the thumbnail image yourself)

Then, just above the closing body tag add the following:

<script>
    $('.lightbox').lightBox();
</script>