...

View Full Version : Javascript Lightbox Not Working



spmcreative
08-04-2010, 05:27 PM
Hi,

I have downloaded a jquery lighbox from http://leandrovieira.com/projects/jquery/lightbox/

You can view my test page at http://www.spmcreative.co.uk/patrickedward/gallery.html

I am a Graphic Designer by trade and this is my first website attempt
so My code may be all over the place as I am only learning.

For some reason the Jquery Slider is working fine, however I cannot get the first link (I know the rest of the gallery pics arent in <a> tags) to open with the lightbox script.

Any help is much appreciated as I am pulling my hair out!

I have included the code below for the whole page.
If you need anything else just let me know.

Kind Regards
Simon Moore






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Patrick Edward Diamonds</title>

<link rel="stylesheet" href="CSS/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="CSS/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
</script>

<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox();
});
</script>

<style type="text/css">
body {
background-image: url(img/MainBG.gif);
background-repeat: repeat;
}
a:link {
color: #999;
text-decoration: none;
border:0;
}
a:visited {
text-decoration: none;
color: #999;
border:0;
}
a:hover {
text-decoration: none;
color: #000;
border:0;
}
a:active {
text-decoration: none;
border:0;
}
</style>
</head>


<body>

<div id="container">
<div id = "header">
<div class = "logo">
<a href="index.html">
<img src="img/logo.png" alt ="Patrick Edward Diamonds" />
</a>
</div>

<ul id="nav">
<li><a href="index.html"> Home |</a></li>
<li><a href="collections.html"> Collections |</a></li>
<li><a href="design.html"> Design Service |</a></li>
<li><a href="trade.html"> Trade Service |</a></li>
<li><a href="gallery.html"> Design Gallery |</a></li>
<li><a href="contact.html"> Contact Us</a></li>
</ul>

</div> <!--end of header-->

<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="img/reel_1.jpg" alt="" /></a>
<a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>
<a href="#"><img src="img/reel_3.jpg" alt="" /></a>
<a href="#"><img src="img/reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="2"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="3"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="4"><img src="img/bullet.png" alt="" /></a>
</div>
</div> <!--end of banner-->

<div id="main1">
<p><img src="img/gallery.png" alt="Gallery" /></p>
<div class="album">
<div class="imageSingle">
<div class="image"><a href="img/Lgallery1.jpg" rel="lightbox"><img src="img/gallery1.jpg" width="50" height="50" alt="" /></a></div>
</div>
<div class="imageSingle">
<div class="image"><img src="img/gallery2.jpg"/></div>
</div>
<div class="imageSingle">
<div class="image"><img src="img/gallery3.jpg"/></div>
</div>
<div class="imageSingle">
<div class="image"><img src="img/gallery4.jpg"/></div>
</div>
<div style="clear:both"></div>
<div class="imageSingle">
<div class="image"><img src="img/gallery5.jpg"/></div>
</div>
<div class="imageSingle">
<div class="image"><img src="img/gallery6.jpg"/></div>
</div>
<div class="imageSingle">
<div class="image"><img src="img/gallery7.jpg"/></div>
</div>
<div class="imageSingle">
<div class="image"><img src="img/gallery8.jpg"/></div>
</div>
<div style="clear:both"></div>
<div class="imageSingle">
<div class="image"><img src="img/gallery9.jpg"/></div>
</div>
<div class="imageSingle">
<div class="image"><img src="img/gallery10.jpg"/></div>
</div>
<div class="imageSingle">
<div class="image"><img src="img/gallery11.jpg"/></div>
</div>
<div class="imageSingle">
<div class="image"><img src=""/></div>
</div>

</div>


</div> <!--end of main1-->

<div id="main2">
<p><img src="img/Quick.png" alt="Quick Enquiry" /></p>

</div> <!--end of main2-->

<div id="footer1">
<p class="footertext">
Patrick Edward Diamonds, Registered Business Address, Road, Town, City, Postcode.<br />
Website design by <a href="http://www.spmcreative.co.uk"> SPM Creative </p>

</div> <!--end of footer1-->

</div> <!--end of container-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});


</body>
</html>

skywalker2208
08-04-2010, 06:12 PM
Try changing the code below


<script type="text/javascript">
$(function() {
$('#imageSingle a').lightBox();
});
</script>


TO


<script type="text/javascript">
$(function() {
$('.imageSingle a').lightBox();
});
</script>



I am not sure if that is going to fix it, but the code on your site won't work because #imageSingle means it should look for something with id="imageSingle". You are using classes so you need the periods in front of it.

The reason why I don't think it will fix it is because firebug gives this error.


$("#imageSingle a").lightBox is not a function

Also you should request the mods to move this to the javascript section because this is a javascript issue.

SB65
08-04-2010, 06:29 PM
skywalker2208 is dead right, but you are also calling jquery twice, once here at line 9:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

and also here at line 147:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

I'd suggest removing the second one and give that a try.

spmcreative
08-04-2010, 08:07 PM
Thanks the lightbox is working now, but for some reason the slider has stopped working only on the index page :confused:

Very Strange.

Any Ideas?

skywalker2208
08-04-2010, 08:17 PM
On the home page you have


<div class="window">
<div class="">
<a href="#"><img src="img/reel_1.jpg" alt="" /></a>
<a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>

<a href="#"><img src="img/reel_3.jpg" alt="" /></a>
<a href="#"><img src="img/reel_4.jpg" alt="" /></a>
</div>
</div>


You need to add the class name to the second div like


<div class="window">
<div class="image_reel">
<a href="#"><img src="img/reel_1.jpg" alt="" /></a>
<a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>
<a href="#"><img src="img/reel_3.jpg" alt="" /></a>
<a href="#"><img src="img/reel_4.jpg" alt="" /></a>

</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum