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 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JQuery... Help Needed! for the Simple Slide-show

    Hi there,

    I just found about jQuery clickable slideshow. I would like to implemented into my food website but the thing really is that as I have no scripting knowledge I wanted to know if there is any step by step guide on using this jQuery Simple Slideshow

    I am finding it hard without any help from you guys

    BTW... I am using squarespace and javascript & flash is allowed to be used in here.

    Thanks

  • #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
    You may need to hire someone to get 'er done...

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have managed to put the slide show up.... but the thing is that I need to link up the urls of the photos so when they clicked the user will be transferred to the section chosen.

    How can I do that?

  • #4
    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
    An anchor tag usually does the trick.

    Really though, post your code if you want help with it.

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here's the code

    <p>&nbsp;</p>
    <div id="slideshow"><img class="active" src="http://www.pimpthatfood.com/storage/image_1.JPG" alt="" /> <img src="http://www.pimpthatfood.com/storage/Image_2.JPG" alt="" /> <img src="http://www.pimpthatfood.com/storage/image_3.JPG" alt="" /> <img src="http://www.pimpthatfood.com/storage/Image_4.JPG" alt="" /></div>
    <p>&nbsp;</p>

    thanks for your help

  • #6
    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 assume you've got some jquery/javascript code too?

  • #7
    New Coder
    Join Date
    Sep 2009
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts
    this is the coding

    <div id="slideshow">
    <img src="img/img1.jpg" alt="" class="active" />
    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
    </div>

    #slideshow {
    position:relative;
    height:350px;
    }

    #slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    }

    #slideshow IMG.active {
    z-index:10;
    }

    #slideshow IMG.last-active {
    z-index:9;
    }

    function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();

    $next.addClass('active');

    $active.removeClass('active');
    }

    $(function() {
    setInterval( "slideSwitch()", 5000 );
    });

    function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
    });
    }

    $(function() {
    setInterval( "slideSwitch()", 5000 );
    });

    function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next = $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
    });
    }

    $(function() {
    setInterval( "slideSwitch()", 5000 );
    });


    Here is the link I brought this http://jonraasch.com/blog/a-simple-jquery-slideshow


  •  

    Posting Permissions

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