How to make picture slide show with html?

HTML & CSS
1

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

2

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/javascript/article.php/3471341/So-You-Want-A-SlideShow-Huh.htm
2. http://www.ideal-helper.com/html-photo-slideshow-code.html

3

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/show/2/Slideshow-Scroller

good luck!

4

you can’t achieved this using html or css only

What about [U]this kind of things[/U]?
For instance this one: [U]CSS3-Cycle-Image-Slider[/U] - you can disable javascript! :slight_smile:
So it is possible:

  • for browsers that support css3-animation ([U]see here[/U]),
  • 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

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

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! :wink:

<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! :slight_smile:

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! :smiley:
7

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

Hi ralph,
Thanks. :slight_smile:

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. :slight_smile:

9

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

The <p> tags and all appear on screen, too.

Huh??? In which browser? :shifty:

11

This is what I get with JS off in Chrome for Mac:

12

Pfff, that’s very strange.
In the html4.01 specs [U]about the <noscript> tag[/U] this example is used:

<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:

<noscript>
     <p>(only for this demo) javascript is: <span>DISABLED</span></p>
</noscript>

In the [U]differences html5/html4[/U] I don’t find a message to the contrary.

  • Note: In xhtml1.0 the html-validator just [U]get red[/U] when the <p> tag is omitted inside the <noscript>: “character data is not allowed here”.
  • Note: the html-validator [U]allows[/U] a <noscript> without <p> if it is html5 !

(just a moment …)

But I guess with this workaround I can give Chrome some time to repair the bug: :wink:

<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>

But a miracle: it was not Internet Explorer! :lol:

13

Yes, that is better, and a preferred option, anyhow. I wouldn’t use <noscript> any more.

14

<nopscript> is very picky and plugins often confuse it.

Better to <p class=“foo”>your text</p> and let Javascript hide/remove it :slight_smile:

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

15

Yes, as in [U]#12[/U].

  • I added it already in the bug report post of Chrome:
<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

@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.