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.
you can’t achieved this using html or css only
- for browsers that support css3-animation ([U]see here[/U]),
The same problem!
I also need a clean html!
And what do you do when something isn’t there? Make it yourself!
<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 only condition: all images must have the same width and height.
- In the same way an horizontal scrollbar could be made.
- 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).
- No table, no iframe!
Nice one, Francky.
With JS disabled, code appears on the site, though:
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.
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.
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.
This is what I get with JS off in Chrome for Mac:
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:
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 …)
- Aha, a Google learns it is a reported Chrome bug: [U]Child elements of <noscript> tags not always rendered[/U] !!!
- With a [U]demo screenshot[/U] 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:
- Applied in the demo - so now you can [U]try again[/U].
But a miracle: it was not Internet Explorer!
Yes, that is better, and a preferred option, anyhow. I wouldn’t use <noscript> any more.
<nopscript> is very picky and plugins often confuse it.
–a NoScript plugin user who used to never see <noscript> content until they added in explicit <noscript> support
Yes, as in [U]#12[/U].
- I added it already in the bug report post of Chrome:
And probably setting the innerHTML of the noscript messages to empty is a better way for accessibility.
@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.