SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to make picture slide show with html?

    please any body help me. how to make picture slide show box with html.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by smdipu View Post
    please any body help me. how to make picture slide show box with html.
    Below two articles will help you to add picture slideshow box with HTML. First article will show you how to do it within frame and another will show how to do it within table. I hope it will help you.

    1. http://www.htmlgoodies.com/beyond/ja...deShow-Huh.htm
    2. http://www.ideal-helper.com/html-pho...show-code.html
    SSLMatrix Leading provider of SSL Security
    Buy RapidSSL Wildcard Certificate Click Here

  3. #3
    SitePoint Member host4's Avatar
    Join Date
    Nov 2013
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mellisa Smith View Post
    Below two articles will help you to add picture slideshow box with HTML. First article will show you how to do it within frame and another will show how to do it within table. I hope it will help you.

    1. http://www.htmlgoodies.com/beyond/ja...deShow-Huh.htm
    2. http://www.ideal-helper.com/html-pho...show-code.html
    The same problem!
    There's a code "javascript". In a browser without "javascript" I can not convey the meaning of the information.
    I also need a clean html!

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)

    Accessible carrousel / slide show

    Some years ago I had the same question, and couldn't find on the web a simple carrousel/slider which could also present all information (links in the carrousel!) when javascript wasn't enabled or supported.
    And what do you do when something isn't there? Make it yourself!


    HTML Code:
    <div id="carrousel">
        <ul>
            <li><a href="otherpage-1.htm"><img src="images/myFirstImage.jpg" 
                     alt="Photo of ..." title="Click to ..."></a>
            </li>
            <li><a href="otherpage-2.htm"><img src="images/mySecondImage.png" 
                     alt="Photo of ..." title="Click to ..."></a>
            </li>
            ...
        </ul>
    </div>
    The rest is done by css (1.2kB) and javascript (2.9kB). - No jQuery or other script-library needed!

    Notes:
    • If javascript is enabled, the images are fading in/out after the pause in the settings.
    • If javascript is not enabled, a vertical scrollbar emerges to go through the images.
    • See source code of html, css and javascript how it's done, and how it can be customized to your needs.
    • The only condition: all images must have the same width and height.
    • In the same way an horizontal scrollbar could be made.
    • To get the images when javascript is disabled, all images have to be in the html, and cannot be javascript-loaded after a while. To avoid problems with a slow download of the page (in case of lots of images or large img filesizes), it's the best to put the <div> with the carrousel in the end of the html. Then the rest of the page (and the first img) is rendered as soon as possible, and the loading of the next images is going on (in the background) while the first img is already there. The position of the carrousel can be arranged with css, so it can be on top of the page as well.
    • The demo page is not fully made for a responsive design.
    • Some (invisible on screen) additions/tips could be made for accessibility in text browsers and screen readers (like a descriptive header and a skip-option for the list of images).
    • All kinds of extras for the visitor could be added with javascript: stop/play, previous/next, first/last, slower/faster, and so on.
    • No table, no iframe!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Nice one, Francky.

    With JS disabled, code appears on the site, though:

    <p>javascript is: <span>DISABLED</span></p>
    One thing I like to do with a slideshow is add a scroll bar if JS is off, so that a user can scroll through the images manually. Either that, or just let the images cascade down the screen and be seen all at once.

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph,
    Thanks.
    With JS disabled, code appears on the site, though: <p>javascript is: <span>DISABLED</span></p>
    Yes, that is only for the demo, so that demo visitors can see the JS state (and don't forget to turn the JS on after disabling). - But I understand that it can be somewhat confusing. To make it clearer, I added "(only for this demo)" in the Enabled/Disabled line. Thanks for the REM!
    • In the html was already commented over there: <!-- not needed for the carrousel -->
    • I made it: <!-- only for this demo, not needed for the carrousel -->

    One thing I like to do with a slideshow is add a scroll bar if JS is off, so that a user can scroll through the images manually.
    Either that, or just let the images cascade down the screen and be seen all at once.
    Indeed, that is the other possibility (but can break down the page layout) / With disabled css that is automatically the only way.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can't achieved this using html or css only, you need to use jquery or javascript... here are some example of slideshow with a demo, also you can copy paste the code and use it to your website... http://www.htmldrive.net/categorys/s...eshow-Scroller

    good luck!

  8. #8
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    you can't achieved this using html or css only
    What about this kind of things?
    For instance this one: CSS3-Cycle-Image-Slider - you can disable javascript!
    So it is possible:
    • for browsers that support css3-animation (see here),
    • as long as you don't need stop/pause/play/next/previous controls; then the javascript functionality will be needed (though not 100% sure).


Tags for this Thread

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
  •