Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Thanked 0 Times in 0 Posts

    Lightbox with jQuery content slider

    Does anyone know if it's possible for jQuery content slider to be compatible with lightbox? I've searched everywhere, and every single result on google talks about either content slider or lightbox, nowhere does it mention any website or tutorial that has both...
    My website consists of a few pages that scrolls left/right, and some pages have pictures that I want to have lightbox functionality (click the thumbnail and the larger image pops up on the same screen in a stylish way). Right now the slider is working, but not the lightbox.
    This is the code: (thanks to venegal for providing the script for the slider)

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <script type="text/javascript" src="js/prototype.js"></script>
            <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
            <script type="text/javascript" src="js/lightbox.js"></script>
            <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
    	<script type="text/javascript">
    		// Wait for all the HTML to be loaded, before doing anything
    		$(function () {
    			// Fetch the pages for later use
    			var $pages = $('#pages .page');
    			// Define a click handler for the navigation links
    			$('#navigation a').click(function (e) {
    				// Prevent the default click behavior, which would be an instant scroll to the requested page
    				// Fetch the scroll target from the href attribute of the clicked link,
    				// get its distance from the left document border, and scroll there
    				$('html, body').animate({scrollLeft: $($(this).attr('href')).position().left});
    			// On window resize, recalculate the widths of the pages and their container
    			$(window).resize(function () {
    				$pages.width($(window).width() - $('#navigation').width());
    				$('#pages').width($pages.outerWidth() * $pages.length);
    			// Trigger resize immediately to set initial widths
    <link href="LSAYfestivalStyles.css" rel="stylesheet" type="text/css">
    <link href="LSAYfestivalFonts.css" rel="stylesheet" type="text/css">
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    Red part is the call for lightbox scripts, purple part is the slider script.
    In the above I put the lightbox scripts before the jquery content slider scripts, and lightbox won't activate at all. If I put lightbox scripts after slider scripts, then slider won't work at all but lightbox will work...

  2. #2
    New to the CF scene
    Join Date
    Oct 2011
    Thanked 0 Times in 0 Posts
    I have the same issue on my site. I am having a hard time finding a solution!

    with scripts together, I get this...

    with only slider.js I get this...

    found this site but I'm not sure how to get it to work since I don't know much about jQuery.


Posting Permissions

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