SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Inserting Slide Show

    Pretty new at all this and pretty much just know the basics. How difficult is it to insert a slide show to my website? Are there programs that do this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Barnum. There are various ways to do it, and it doesn't have to be hard. However, what you first need to decide is how you want the slideshow to work, as there are lots of different kinds of slideshow. What sort of functionality / look / design are you considering? Or does it not matter? (in which case, we could suggest something simple).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Would like to have about five photos on the index page that fade or change every three or four seconds.... Does that make sense?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    So do you mean you see one image at a time, and the images fade one into another?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, here is a nice slideshow for that sort of thing:

    http://jquery.malsup.com/cycle/basic.html

    Now, you will have to style it to suit the size of your images etc. And you also have to install some scripts etc., but it's not hard.

    Firstly, put something like this into your HTML:

    Code:
    <div class="slideshow"> 
    	<img src="/images/image1.jpg" width="200" height="200">
    	<img src="/images/image2.jpg" width="200" height="200">
    	<img src="/images/image3.jpg" width="200" height="200">
    	<img src="/images/image4.jpg" width="200" height="200">
    	<img src="/images/image5.jpg" width="200" height="200">
    </div>
    That assumes that your images are in a folder called /images/ at yoursite.com/images/, so of course if that's not where your images are you'll have to change those paths.

    It also assumes your images are 200 x 200 px, so reset those dimensions to suit.

    You will also need to set some styles for .slideshow div, such as

    Code:
    .slideshow {
    width: 200px; 
    height: 200px; 
    overflow: hidden;
    }
    Then, in the head of your document (between the <head> ... </head> tags), OR at the end of your document, just before the closing </body> tag, add this code:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() {
        $('.slideshow').cycle({
    		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    	});
    });
    </script>
    It may take a bit of fiddling to get it right, but this is a pretty reliable script.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Is this correct?

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
    });
    </script>

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What do you mean? You've just copied the code I pasted above. Have you tried it on a page? Have you used the HTML? Give as much info as you can to help us help you. I've given you some pretty good help already, but I can't do it for you, so you need to be really clear about where you are up to.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Let me look over what I did again....could be just that one small thing that is screwing things up... didn't mean to sound unappreciable.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This stuff can be tricky, so feel free to PM me a link if you don't want it seen publicly.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ralph, thanks...have something now that works and I have to fine tune.... Appreciate your help.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Great, thanks for the feedback, and well done. You've set up JavaScript on your own website, which is quite an achievement!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •