Slide Show Code

[RobDog888]

So Im googling for some simple code to throw on my website which is a hosted shopping cart solution. So I cant use .net or anything like that. Just some good ole html, javascript and css I would suppose would be the most widely compatible code.

Lots of snippet sites but spent enough time reading through bs sites that dont deliver or have little to offer.

Whats everyones favorite snippet site or such?

Just looking for slide show with some control and autoplay

Thanks

[szlamany]

Maybe it's time to try jQuery and one of the plugins

https://plugins.jquery.com/tag/slideshow/

[RobDog888]

Yea I suppose but I havent done any real web stuff in a while. Seems overkill? Theres no demo or preview of it?

[szlamany]

If you want simple to implement then skip the jQuery stuff - you would want to use it for other reasons (I do lots and lots of DOM changes and use jquery grids and datepickers and fancy stuff like animated graphs).

Google for 10 BEST JAVASCRIPT SLIDESHOWS and see where that gets you - that's usually how I find my jQuery stuff.

[dday9]

For shlits and giggles, I tried to make a slideshow and I'm fairly happy with it:

HTML

<div class="Slideshow">
	<input checked="checked" class="SlideGroup" id="Group1" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group1">Image1</label>
	<img alt="image1" class="AccordionTab" src="http://lorempixel.com/400/200/cats" />
	
	<input class="SlideGroup" id="Group2" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group2">Image2</label>
	<img alt="image2" class="AccordionTab" src="http://lorempixel.com/400/200/sports" />
	
	<input class="SlideGroup" id="Group3" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group3">Image3</label>
	<img alt="image3" class="AccordionTab" src="http://lorempixel.com/400/200/people" />
</div>

CSS

.Slideshow *, .SlideGroup:checked + label, .SlideGroup:checked + label + img {
	display: block;
}
.SlideGroup, .SlideGroup + label, .SlideGroup + label + img {
	display: none;
}
.SlideGroup:checked + label {
	background-color: rgb(40, 44, 47);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #fff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.SlideHeader:hover {
	background-color: rgb(40, 44, 47);
	color: #fff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.SlideHeader {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #000;
	cursor: pointer;
	padding-left: 1em;
	padding-top: 1em;
}
.Slideshow img {
	background-color: #fff;
	border: 1px solid #ccc;
}

JavaScript

var index = 0;
var radios = ["Group1", "Group2", "Group3"];
window.onload = function () {
	slide();
};

function slide() {
	index++;
	if (index > radios.length - 1) {
		index = 0;
	}
	document.getElementById(radios[index]).checked = true;
	setTimeout("slide()", 1750);
}

Fiddle
http://jsfiddle.net/6L4wjpyc/

It can be improved on by far, but it's something.

[RobDog888]

If you want simple to implement then skip the jQuery stuff - you would want to use it for other reasons (I do lots and lots of DOM changes and use jquery grids and datepickers and fancy stuff like animated graphs).

Google for 10 BEST JAVASCRIPT SLIDESHOWS and see where that gets you - that's usually how I find my jQuery stuff.

Thanks! I googled and would get all kinds of lame results. Trying not to have any dependancies as I cannot upload any third party dlls.

[RobDog888]

For shlits and giggles, I tried to make a slideshow and I'm fairly happy with it:

HTML

<div class="Slideshow">
	<input checked="checked" class="SlideGroup" id="Group1" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group1">Image1</label>
	<img alt="image1" class="AccordionTab" src="http://lorempixel.com/400/200/cats" />
	
	<input class="SlideGroup" id="Group2" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group2">Image2</label>
	<img alt="image2" class="AccordionTab" src="http://lorempixel.com/400/200/sports" />
	
	<input class="SlideGroup" id="Group3" name="SlideGroup" type="radio" />
	<label class="SlideHeader" for="Group3">Image3</label>
	<img alt="image3" class="AccordionTab" src="http://lorempixel.com/400/200/people" />
</div>

CSS

.Slideshow *, .SlideGroup:checked + label, .SlideGroup:checked + label + img {
	display: block;
}
.SlideGroup, .SlideGroup + label, .SlideGroup + label + img {
	display: none;
}
.SlideGroup:checked + label {
	background-color: rgb(40, 44, 47);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #fff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.SlideHeader:hover {
	background-color: rgb(40, 44, 47);
	color: #fff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.SlideHeader {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #000;
	cursor: pointer;
	padding-left: 1em;
	padding-top: 1em;
}
.Slideshow img {
	background-color: #fff;
	border: 1px solid #ccc;
}

JavaScript

var index = 0;
var radios = ["Group1", "Group2", "Group3"];
window.onload = function () {
	slide();
};

function slide() {
	index++;
	if (index > radios.length - 1) {
		index = 0;
	}
	document.getElementById(radios[index]).checked = true;
	setTimeout("slide()", 1750);
}

Fiddle
http://jsfiddle.net/6L4wjpyc/

It can be improved on by far, but it's something.

Yea thats the basics and like what I would find but I need bullets, controls, links and pause on mouseover

Thats a nice online ide site for js!

[dday9]

Yea thats the basics and like what I would find but I need bullets, controls, links and pause on mouseover

Thats a nice online ide site for js!

I done did s'more diggin and I found this: http://jsfiddle.net/hellosze/mU2h9/

It pauses on hover and gives the user the option to chose the desired picture too.