jQuery easySlider works, no lightbox script seems to

Hollow Gram · 01-27-2010, 11:27 AM

So I'm trying to get a carousel-type display work with a lightbox script to display some graphics. For some reason neither lightbox nor facybox seem to work and I have no idea why. The code seems to be totally standard, I've rechecked everything from file locations to code layout to ensure it would work but to no avail. The problem of course is that the page changes instead of the lightbox frame appearing.

The url for the site is at http://www.sweetnessdesigned.com/test2

I've also tried

Code:

<script type="text/javascript">
$(document).ready(function(){
    initLightbox();
    $("#slider").easySlider();
}); 
</script>

But that breaks the easySlider and doesn't make lightbox work.

Sometimes it's as if I can see the lightbox script starting to work (i.e. the page fades a tad darker) but then the page changes.

Anyone have any ideas?

Fumigator · 01-27-2010, 05:43 PM

I use this lightbox:

http://plugins.jquery.com/project/jquerylightbox_bal

And it works great with the easyslider. I took the easyslider demo 02 and added the above lightbox to it:

Code:

<!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>
	<title>Easy Slider jQuery Plugin Demo</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.5.js"></script>
	<script type="text/javascript" src="lightbox/js/jquery.lightbox.packed.js?show_info=true&amp;show_extended_info=true&amp;show_linkback=false&amp;auto_scroll=follow&amp;speed=100"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider();
			
			
		});	
	</script>
	
<style type="text/css">

	body {
		background:#fff url(images/bg_body.gif) repeat-x;
		font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
		color:#333;
		line-height:180%;
		margin:0;
		padding:0;
		text-align:center;
	}
	h1{
		font-size:180%;
		font-weight:normal;
		margin:0;
		padding:20px;
		}
	h2{
		font-size:160%;
		font-weight:normal;
		}	
	h3{
		font-size:140%;
		font-weight:normal;
		}	
	img{border:none;}
	pre{
		display:block;
		font:12px "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		width:674px;
		}	
			
    /* image replacement */
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
			

	#container{	
		margin:0 auto;
		position:relative;
		text-align:left;
		width:696px;
		background:#fff;		
		margin-bottom:2em;
		}	
	#header{
		height:80px;
		background:#5DC9E1;
		color:#fff;
		}				
	#content{
		position:relative;
		}			

/* Easy Slider */

	#slider{}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		}	
	#nextBtn{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:30px;
		height:77px;
		background:url(images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a{ 
		background:url(images/btn_next.gif) no-repeat 0 0;	
		}												

/* // Easy Slider */

</style>	
	
</head>
<body>

<div id="container">

	<div id="header">
		<h1>Easy Slider jQuery Plugin Demo - styled version</h1>
	</div>

	<div id="content">
	
		<div id="slider">
			<ul>				
				<li><a rel="lightbox-01" href="images/01.jpg"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
				<li><a rel="lightbox-02" href="images/02.jpg"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
				<li><a rel="lightbox-03" href="images/03.jpg"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
				<li><a rel="lightbox-04" href="images/04.jpg"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
				<li><a rel="lightbox-05" href="images/05.jpg"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
			</ul>
		</div>
			
		<h3>Usage</h3>
		
		<p><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding" title="read more about this jquery plugin">back to the article</a></p>
		
		<p><strong>Easy Slider</strong> jQuery Plugin is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>

	</div>

</div>

</body>
</html>

I can't really publish it so you can see it work but if you copy/paste that to your server and maybe tweak the paths to the plugins you should be able to get the demo to work and the incorporate that into your own site.

Hollow Gram · 01-28-2010, 12:08 PM

Thanks for the input, I'll give it a go