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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Javascript Lightbox Not Working

    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





    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>
    <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>

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Try changing the code below
    Code:
    <script type="text/javascript">
        $(function() {
            $('#imageSingle a').lightBox();
        });
        </script>
    TO
    Code:
    <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.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    skywalker2208 is dead right, but you are also calling jquery twice, once here at line 9:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    and also here at line 147:

    Code:
     <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.

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks the lightbox is working now, but for some reason the slider has stopped working only on the index page

    Very Strange.

    Any Ideas?

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    On the home page you have
    Code:
    <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
    Code:
    <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>


  •  

    Posting Permissions

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