Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question easySlider works, no lightbox script seems to

    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?

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.

  • Users who have thanked Fumigator for this post:

    Hollow Gram (01-28-2010)

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the input, I'll give it a go


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •