HTML Code for Slideshow

[Comanche]

Hello everyone,

This is my first post, so i apologize if my problem is not clear enough. Ima get straight to the point.

My Problema:

Well, I am currently working on getting a website together for my gaming clan. and I see some other sites have a slideshow that just loops pictures, I really like that. So, im just wondering if there is like an html code that could do such a thing? Thanks!

Regards,
Comanche :)

[jscheuer1]

Not sure what you mean by loop. The closest thing that uses just HTML would be the HTML marquee tag which is non-standard but fairly well supported. It would allow for a train of images to go by and repeat, but I believe there is always a gap equal to the length of the train in between each loop.

Other than that, you would need some kind of script, javascript probably. A favorite of mine is:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

But, if that one isn't good for you, there are many to choose from, here:

http://www.dynamicdrive.com/dynamicindex14/index.html

some more here (along with other stuff for images):

http://www.dynamicdrive.com/dynamicindex4/indexb.html

And these are just what are available in the Dynamic Drive Library. If you use Google to search for:

slideshow

You will likely find tons of them.

[Shemida]

Hello

I stumbled in on this convo because I am looking for a slide show that I can place in a div tag that allows me to update date automatically when I upload more images into the image directory.

In laymen's terms, the code is reading the image folder and playing all images in the folder. If I remove or add an image, the code just plays what is in the folder.

I don't mind coding it myself, I just need to know where to start AND if it has been done before. If so I would gladly credit the writer of the code I use.

I am aware of Java and flash.... however these USUALLY require to remake the slideshow if you want to add or remove images. I want to avoid having to remake the slideshow every time I have a new creation photographed, or if I have sold (no longer need to show) a creation I have in the slideshow.

Any valid suggestions would be greatly appreciated!

[jscheuer1]

You would need a server side language like PHP, asp, etc. to fetch the images. Other than that, you could use almost any javascript slideshow. Does your host have PHP? That's the easiest for folks around here to work with. I can probably do it in asp as well.

Without a server side language you can approximate fetching the images by using a naming convention for them and keeping them in sequence numerically. But that would mean no gaps in the sequence, so wouldn't fit the requirements you've outlined.

[Beverleyh]

If you're good to use PHP, you can try this jQuery + PHP slideshow: http://fofwebdesign.co.uk/template/_testing/jquery_random_auto_pic_rotator.php

It takes all the images from a specified folder (using PHP) and loads them into an unordered list. Then jQuery adds the fading effects, etc.

Its currently set to shuffle the images so they load randomly, but you can uncomment the line that will sort them in order and then you can force a specific image sequence.

You specify the allowed file extensions too.

Just set the image size in the CSS, set the pic rotation interval in the JavaScript (curently set to 4 seconds), then point the script to the image folder and that's about it.

Hope it helps

[jahed]

http://sawater.ucoz.net/

<style type="text/css">


/* JavaScript Image Slider By http://mdonti-n.blogspot.com/ */


#mcis {
display: none;
}


#sliderFrame {
position: relative;
width: 600px;
margin: 0 auto;
border:3px solid #E1E0E2;
}


#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
right: -4px;
}


#slider {
width: 630px;
height: 300px;
background: #fff url(https://lh3.googleusercontent.com/-jr3u7sHVNzc/T_9iyf5egvI/AAAAAAAAC9c/jwanynfbt7Y/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px 010007;
}


#slider img {
position: absolute;
border: none;
display: none;
}


#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
right: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}


div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
right: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}




div.mc-caption-bg {
background-color: #0066CC;
}


div.mc-caption {
font: bold 25px/21px traditional arabic ;
color: #0000;
z-index: 4;
padding: 10px 0;
text-align: center;
}


div.mc-caption a {
color: #FB0;
}


div.mc-caption a:hover {
color: #DA0;
}


div.navBulletsWrapper {
top: 0px;
right: 19px;
width: 15px;
background: none;
padding-right: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}


div.navBulletsWrapper div {
width: 0px;
height: 0px;
background: transparent url(https://lh3.googleusercontent.com/-XpmNmet2gQE/T_9iZTdKsgI/AAAAAAAAC9U/e5Hto1X5zKc/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;
float: right;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-left: 11px;
_position: relative;
}


div.navBulletsWrapper div.active {
background-position: 0 -11px;
}


#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>


<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>


<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">

<a href="http://shadess.ucoz.com/"><img src="http://shadess.ucoz.com/swatar-s/208402_157295954330401_7805660_n.jpg"Image Description="Photo addresses"/></a>



</div></div>

Example the same slide Shaw on this site http://shadess.ucoz.com/

[stuartrh]

Thank you so much!
That worked a treat! Got to tweak it now of course, but this was a very helpful post! :)