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 13 of 13
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post

    Image slideshow?

    Hey guys, I hope this is the right place to ask. I have searched the internet high and low for a script that does what I need, but I cant find anything! I would think it would be pretty easy to build, but I am not sure.

    I need it to do a couple things:
    -Be able the click the photo to advance to the next one
    -Fade into the next photo
    -When it reaches the end, restart with the first photo
    -Have a counter in text somewhere not on the photo, for example (2 of 3) underneath

    So does anyone know of anything? I can find tons of scripts but none of them do all these things, theres always something missing. Any advice?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Have you looked at the many excellent scripts at
    http://www.vicsjavascripts.org.uk/

    If there is one which largely but perhaps not completely meets your needs I expect Vic would suggest how to modify it if you asked him nicely.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    Have you looked at the many excellent scripts at
    http://www.vicsjavascripts.org.uk/

    If there is one which largely but perhaps not completely meets your needs I expect Vic would suggest how to modify it if you asked him nicely.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Thanks Philip. I actually have found something that is very very close to what I need. It is only missing one function!!

    The only thing that is missing is, I want to proceed to the next photo by clicking on the photo itself, as well as have the next/previous links. I have been staring at the JS for a while now haha, I cant seem to see how I can do this. I thought I could just add class="next" to the image links but it doesnt seem to work.

    Does anyone know how I can make this happen?
    Last edited by rtown; 12-16-2010 at 07:54 PM.

  • #4
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Try this.

    Replace this:
    Code:
    <div id="fadeshow2"></div>
    With this:
    Code:
    <div id="fadeshow2" onclick="fadeSlideShow.showslide('next');"></div>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DJCMBear View Post
    Try this.

    Replace this:
    Code:
    <div id="fadeshow2"></div>
    With this:
    Code:
    <div id="fadeshow2" onclick="fadeSlideShow.showslide('next');"></div>
    Unfortunately it doesnt work. I tried to play around with some way to add next to that entire div as well, but had no success..

  • #6
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Probs not the best way to do it but try this.
    Code:
    <a onclick="fadeSlideShow.showslide('next');"><div id="fadeshow2"></div></a>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DJCMBear View Post
    Probs not the best way to do it but try this.
    Code:
    <a onclick="fadeSlideShow.showslide('next');"><div id="fadeshow2"></div></a>
    Nope, doesnt work. I tried as well to ahref the whole div with class="next" but it doesnt work either...

  • #8
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Ok try this.

    Code:
    <div id="fadeshow2" onclick="fadeSlideShow.navigate('next');"></div>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #9
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DJCMBear View Post
    Ok try this.

    Code:
    <div id="fadeshow2" onclick="fadeSlideShow.navigate('next');"></div>
    Nope. Doesnt work. I have been trying to mess around with the actual JS script and add something to the image links... maybe the div isnt the right place to look?

  • #10
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    The div is acting like a container everything get put inside it so if you add an onclick to the div it makes everything inside it able to be clicked that's why I said about adding it to there but the coder of that js code used such a messed up way to do the buttons it makes it harder to use anything on the images.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #11
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DJCMBear View Post
    The div is acting like a container everything get put inside it so if you add an onclick to the div it makes everything inside it able to be clicked that's why I said about adding it to there but the coder of that js code used such a messed up way to do the buttons it makes it harder to use anything on the images.
    Hmm. Thats too bad. If you or anyone can think of anything else to try, Im all for it.

    Other than this one function this script is perfect!

  • #12
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Ok, Ive got it close!
    It cycles to the next image when you click the image, the only problem is the link is not within just the image, is spans 100% width... you can click anywhere to the right of the image and it cycles... not good.
    Last edited by rtown; 12-16-2010 at 07:54 PM.

  • #13
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    And its done! I just restricted the div to the size of the photo. Boom!
    Code:
    <style type="text/css">
    #fadeshow2toggler {width:738px;} 
    </style>
    
    <div id="fadeshow2toggler">
    <a href="#" class="next"><div id="fadeshow2"></div></a>
    <a href="#" class="prev">Previous</a>  <a href="#" class="next">Next</a> <span class="grey">(<span class="status"></span>)</span>
    </div><!--end fadeshow2toggler-->
    Thanks for all the help!


  •  

    Posting Permissions

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