SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy image slider on load?

    Hi all,

    I came across this awesome image slider:
    Thumbnails Navigation Gallery with jQuery

    The problem is ..you have to click on "best shots" to see the thumbnail navigation..

    1) How do you show this thumbnail navigation straight away on loading the page? (ie "best shots" and other list items dont need to be there)

    2) and get the thumbnails show near the bottom of the page?

    3) and also get the next image to fade in automatically say after 5 seconds, without having to click on a thumbnail, although one can?

    Thanks in advance!
    its a nice image script its just missing a few things , and there is no tutorial on these tweaks
    Last edited by escapedf; Sep 10, 2011 at 04:03. Reason: spelling
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you might need to take a look at some list posts with lots of sliders.

    There's probably one out there that already does (almost) exactly what you want
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,
    ive already spent hours adding in my own images..

    so thats why i asked as this is the slider i wanted;-)

    There must be somebody who knows javascript in this forum , to be able to help out ..

    So please if others can help id appreciate it..
    my page im working on is here:
    Thumbnails Navigation Gallery with jQuery

    Thanks in advance
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ah well, if that's the case

    Easy stuff first.

    To get the "Best shots" to appear near the bottom, dig in to http://www.bluecrushdesign.co.za/filth/css/style2.css and find "ul.st_navigation" and instead of telling it to be positioned at the top, tell it to be at the bottom:

    Code CSS:
    ul.st_navigation {
      position: absolute;
      width: 100%;
      bottom: 10px; /* instead of top:60px use bottom */
      left: -500px;
      list-style: none;
    }

    Next, find the "st_wrapper" class in style2.css and modify it so it's positioned from the bottom as well.
    Code CSS:
    .st_wrapper{
    /* Make sure to remove the "display:none" so the thumbs show by default */
    	position: absolute;
    	width:100%;
    	height:126px;
    	overflow-y:hidden;
    	bottom:0px; /* This was changed from top:50px; */
    	left:0px;
    }



    In the markup, if you don't want the "Best shots" link shown, remove it from the markup
    HTML Code:
    <!-- it's safe to remove this: -->
    <span class="st_link">Best Shots<span class="st_arrow_down"></span></span>
    Now for the hard(er) part, the auto-rotate.

    There are several things we need to do for this.

    - Firstly, we'll want to keep track of which thumbnail is the currently active one.
    - then we need to make sure that if someone has interacted with a thumbnail we stop auto-rotating

    The code is probably too long to post here, so I've put it up on my server and attached in a zip. (I've taken your markup / styles / images and worked with it)

    The auto rotate method looks like this:
    Code JavaScript:
    /** Autorotate method */
    function autoRotate(delay) {
    	//check of the thumbs have been interacted with
    	if (thumbsInteractedWith === true) {
    		clearTimeout(theAutoRotateTimer);
    		return;
    	}
     
    	//the timer function
    	theAutoRotateTimer = setTimeout(function(){
    		//make sure we don't enter the body of the method if someone clicked ona  thumb
    		if (thumbsInteractedWith === true) {
    			return;
    		}
    		//find the currently active thumb and make the next one active.
    		$active = $(".st_thumbs .active");
    		$next = $active.next();
     
    		if ($active.is(":last-child")) {
    			$next = $active.parent().find("img:first");
    		}
     
    		setImage($next);
     
    		//call autorotate again ... yay for recursiveness
    		autoRotate(delay);
     
    	}, delay);
     
    }
     
    autoRotate(3000);
    Attached Files Attached Files
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    thanks again for this, i really appreciate it..
    ok so i got your files from your server..then tweaked them again a bit:

    heres my version: Thumbnails Navigation Gallery with jQuery

    One question..
    where in code do you change the amount of seconds that the rotation occurs for the big photo?


    Also, is there a way we can re-start this rotation again , after say a few seconds, after someone has clicked on a thumbnail?


    is this it?
    //call autorotate again ... yay for recursiveness
    autoRotate(delay);

    }, delay);

    }

    autoRotate(3000);



    if so , what is 3000? 3000 seconds before it starts again?
    im not sure its working though, if that is it , i waited a while ;-)


    Ps: do u know how do you get the "loading" into the centre of where big images will show?,
    i changed the position to relative in that class, but this messed up the width and height of it, i then specified width and height which didnt seem to work


    ps - so these other javascript files you didnt need?;

    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">
    Cufon.replace('span,p,h1',{
    textShadow: '0px 0px 1px #ffffff'
    });
    </script>


    ;-)
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  6. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by escapedf
    thanks again for this, i really appreciate it...
    No probs, glad to help.

    The "autoRotate(3000)" call is where you set how quick the images swap out.

    the 3000 is milliseconds, so just take the amount of seconds you want and multiply by 1000

    I did start working on a version that would automatically restart after a given time, but it was about 3am so I decided to go to bed instead :P

    Making sure the autorotate starts again is a tiny bit harder, but not too much extra effort. Unfortunately I don't have the time right now to write it though

    You could get the loading div in to the middle by changing its CSS slightly:
    Code:
    .st_loading {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 10000000;
        width:70px;
        height:20px;
        margin:-25px 0 0 -85px;
    
        /* Things that don't need to change ... */
        background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
        padding:15px 40px 15px 60px;
        -moz-box-shadow:0px 0px 2px #000;
        -webkit-box-shadow:0px 0px 2px #000;
        box-shadow:0px 0px 2px #000;
        opacity:0.6;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    }

    ps - so these other javascript files you didnt need?;

    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">
    Cufon.replace('span,p,h1',{
    textShadow: '0px 0px 1px #ffffff'
    });
    </script>
    Not sure if you needed these or not, just removed them from my local version
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

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