Resolved jquery lightbox stalls - can't exit the current page - possible js library conflict?

headache · 10-17-2009, 06:58 AM

Hello all,

My problem may be commonplace. Here is the site that I'm working on:

www.deepak-singh.com

You'll see everything works ok on the 'photos' page. Except, after you're done perusing the images, and try to exit the page by clicking on any of the visible links, the lightbox stalls - the loading.gif hangs and you are unable to exit the page. Also (this is a less important issue), at either end of the slideshow, the next and prev buttons still appear. Is there a way to have those buttons disappear when you get to the very last image in the gallery sequence at each end?

My novice suspicion is that there is a conflict of js libraries. Please note, I am totally new to web design. I've been doing it about two months. I've also read past threads about 'conflicting scripts' but found the developers solutions too difficult to understand - even on the jquery.com website - It's way over my head. I'm hoping that there is someone out there that can explain what is wrong in simple, layman's terms with a step by step guide. Judging by the similar entries I've seen, I'm not alone in my confusion. Here are the scripts that appear in the photos.html page (I hope I'm not abusing admin guidelines by pasting the following in - Any help would be greatly appreciated. Thanking the community in anticipation:

<head>

<title>Deepak Singh - Writer and Independent Radio Producer - Photos</title>

<link href="photos.css" rel="stylesheet" type="text/css" />






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

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [784, 332], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/IMG_18.jpg"],
["images/IMG_18.jpg"],
["images/IMG_18.jpg"]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:1800, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>



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




</head>

<body>

<div id="outerWrapper">

<div id="innerWrapper">

<div id="fadeshow1">
</div>

<div id="mainNav"> 
<ul>
<li><a href="http://www.deepak-singh.com/index.html">home</a></li>
<li><a href="http://www.deepak-singh.com/bio.html">bio </a></li>
<li><a href="http://www.deepak-singh.com/book.html">book </a></li>
<li><a href="http://www.deepak-singh.com/photos.html">photos </a></li>
<li><a href="http://www.deepak-singh.com/contact.html">contact</a></li>
</ul>
</div> 

<div id="textbox1">
<h1>Photos by Pat Jarrett</h1>
<p class="bodyText">To visit Pat's site,<a class="textLinksOne" href="http://patjarrett.blogspot.com/"><br />Click here.</a></p>
<h2></h2>
</div> 

<div id="gallery">

<a href="images/IMG_1.jpg" title="Recording audio on the streets of Charlottesville, VA"><img src="images/tIMG_1.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_2.jpg" title="Portrait by Pat Jarrett"><img src="images/tIMG_2.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_3.jpg" title="Portrait by Pat Jarrett"><img src="images/tIMG_3.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_4.jpg" title="Portrait by Pat Jarrett"><img src="images/tIMG_4.jpg" width="100" height="66" alt="" /></a><br />

<a href="images/IMG_5.jpg" title="Awareness Program / Lucknow, India"><img src="images/tIMG_5.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_6.jpg" title="On location / Jefferson's Monticello"><img src="images/tIMG_6.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_7.jpg" title="Relaxing with my wife Holly"><img src="images/tIMG_7.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_8.jpg" title="Portrait by Pat Jarrett"><img src="images/tIMG_8.jpg" width="100" height="66" alt="" /></a><br />

<a href="images/IMG_9.jpg" title="On location / Jefferson's Monticello"><img src="images/tIMG_9.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_10.jpg" title="Portrait by Pat Jarrett"><img src="images/tIMG_10.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_11.jpg" title="Awareness Program / Lucknow, India"><img src="images/tIMG_11.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_12.jpg" title="Portrait by Pat Jarrett"><img src="images/tIMG_12.jpg" width="100" height="66" alt="" /></a><br />

<a href="images/IMG_13.jpg" title="On location / Jefferson's Monticello"><img src="images/tIMG_13.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_14.jpg" title="Portrait by Pat Jarrett"><img src="images/tIMG_14.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_15.jpg" title="Portrait by Pat Jarrett"><img src="images/tIMG_15.jpg" width="100" height="66" alt="" /></a>
<a href="images/IMG_16.jpg" title="Awareness Program / Lucknow, India"><img src="images/tIMG_16.jpg" width="100" height="66" alt="" /></a><br />

</div>

<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

<div id="facebookWrapper">
<p class="facebookCopy">my: <a class="textLinksTwo" href="http://www.facebook.com/pages/Deepak-Singh/278246070536">Facebook</a> | <a class="textLinksTwo" href="http://www.deepak-singh.com/wordpress/">Blog</a> | <a class="textLinksTwo" href="http://www.linkedin.com/in/dpak21">LinkedIn</a></p>
</div>

<div id="copyright">
<p class="copyrightText">Copyright © 2006-2009 deepak-singh.com | All rights reserved |<br />Web Design by <a class="textLinksThree" href="mailto:leesherratt@gmail.com">Lee Sherratt</a> | Photos by <a class="textLinksThree" href="http://patjarrett.blogspot.com/">Pat Jarrett</a></p>
</div>

</div> 

</div> 

</body>
</html>

headache · 10-18-2009, 05:14 AM

For anyone who's interested: After searching all day, only 'one' website 'alluded' to a possible solution to my problem, and even then only indirectly. I was quite honestly amazed that no one (even jquery.com is ambiguous) has bothered to mention this important fact about jquery Lightbox 0.5., ...... With regards to my original post; there was no conflict in the javascript libraries. None at all. The problem was that I was missing one crucial piece of code... This one:

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

I put it in the <head> tag just below the original 'lightbox' scripts, as you can see below - Note: the code below shows all of my scripts as they appear right now in the <head> tag on my final photos page - Everything is working properly.

<head>


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [784, 332], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/IMG_18.jpg"],
["images/IMG_18.jpg"],
["images/IMG_18.jpg"]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:1800, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>



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

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



</head>

To summarize:

This new added script is crucial - It tells lightbox to only apply it's script to 'a-links' in the gallery div. Without this script, lightbox becomes activated on all/every other a-link on the page causing lightbox to activate and hang indefinately. That was my problem. I thought it was a conflict of libraries. It was actually Lightbox applying its functions to every other a-link on my page instead of just the a-links within the gallery div itself.

I hope this helps other users of Lightbox. Thanks for reading my post.

headache · 10-18-2009, 06:15 AM

The problem with the 'next' and 'prev' tabs resolved itself when I added that simple code to the head tag. Don't ask me how that happened.