SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  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 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!

  4. #4
    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).

  5. #5
    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!

  6. #6
    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!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 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.

  8. #8
    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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Francky View Post
    Yes, that is only for the demo, so that demo visitors can see the JS state
    I just wondered if you wanted the HTML to appear along with the message, that's all. The <p> tags and all appear on screen, too.

  10. #10
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    The <p> tags and all appear on screen, too.
    Huh??? In which browser?
    only-demo.png --- only-demo-disabled.png

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Francky View Post
    Huh??? In which browser?
    This is what I get with JS off in Chrome for Mac:

    jsoff.png

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Pfff, that's very strange.
    In the html4.01 specs about the <noscript> tag this example is used:
    HTML Code:
    <SCRIPT type="text/tcl">
         ...some Tcl script to insert data...
    </SCRIPT>
    <NOSCRIPT>
         <P>Access the <A href="http://someplace.com/data">data.</A>
    </NOSCRIPT>
    Just the way I did it in my html:
    HTML Code:
    <noscript>
         <p>(only for this demo) javascript is: <span>DISABLED</span></p>
    </noscript>
    In the differences html5/html4 I don't find a message to the contrary.
    • Note: In xhtml1.0 the html-validator just get red when the <p> tag is omitted inside the <noscript>: "character data is not allowed here".
    • Note: the html-validator allows a <noscript> without <p> if it is html5 !

    (just a moment ...)

    • Aha, a Google learns it is a reported Chrome bug: Child elements of <noscript> tags not always rendered !!!
    • With a demo screenshot like yours.
    • Note: in Chrome under WinXP and Win7 I cannot reproduce the error.
    • Note 2: in Chrome under Win7 on my laptop I saw a horizontal scrollbar if JS is disabled (not in Chrome under WinXP on my desktop). Adapted the CSS, now repaired.

    But I guess with this workaround I can give Chrome some time to repair the bug:
    HTML Code:
    <p>(only for this demo) javascript is: <span id="scriptState">DISABLED</span></p>
    <script type="text/javascript">
    	// not needed for the carrousel
    	document.getElementById('scriptState').innerHTML="ENABLED";
    </script>
    • Applied in the demo - so now you can try again.

    But a miracle: it was not Internet Explorer!

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Yes, that is better, and a preferred option, anyhow. I wouldn't use <noscript> any more.

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    <nopscript> is very picky and plugins often confuse it.

    Better to <p class="foo">your text</p> and let Javascript hide/remove it :)

    --a NoScript plugin user who used to never see <noscript> content until they added in explicit <noscript> support

  15. #15
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Better to <p class="foo">your text</p> and let Javascript hide/remove it
    Yes, as in #12.

    - I added it already in the bug report post of Chrome:

    HTML Code:
    <div id="noscript">What was in the noscript-tag ..... </div>
    <script type="text/javascript">
         document.getElementById('noscript').style.display="none";
         // rest of script
    </script>
    If there are more <noscript>'s on a page, you can make a class for them instead of an ID of course, and let javascript walk through the class.
    And probably setting the innerHTML of the noscript messages to empty is a better way for accessibility.

  16. #16
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Photo Carrousel Glitch?

    @Francky I just started using the Photo Carrousel, and already I've hit a snag. It seems the fade effect stopped working as soon as I got the CSS to my liking. I'm having a hard time recreating it in jsFiddle. In there, it just doesn't do anything. On my project page, the images switch from one to another, but without a fade effect. Here's the link to the fiddle http://jsfiddle.net/cmc_tech/g5GfB/3/. Any assistance would be greatly appreciated.
    Last edited by TechnoBear; Feb 23, 2014 at 07:50. Reason: Fixed mention


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
  •