Im trying 2 make a image Viewer but not doing that well have looked around and just cant find one that i can get 2 work.

 

Just hoping some one could point me in the right directions eg tutorial or os code that i can look at and make work

 

 

have made a quick image of what im planning

 

Hope some one can help PLEASE

 

Edited September 10, 201312 yr by PumpkinHead

got one part working just need 2 find a good viewer/slider so will keep going. thanks all for reading

Have you looked at flexslider?

 

It is free and has a bunch of options. I think it is responsive, too, if that's a consideration.

 

http://flexslider.woothemes.com/thumbnail-slider.html

Thanks for that mrbken will have a look and this site is not responsive at the moment but you never know what i will have 2 make next Thanks again

PS iv made a CSS one but it has a bug lol it gose somthing like this

<div class="ImageFrame">
	<div class="ImageMain">
		<ul>
			<li><a name="<? echo $img["Id"];?>"><img src="sto/<? echo $img["image_name"];?>" title=""alt="" /><a></li>
		</ul>
	</div>	
	<div class="ImageThumb">
		<ul>
			<li><a href="#<? echo $img["Id"];?>"><img src="sto/<? echo $img["image_name"];?>" title=""alt="" /></a></li>
		</ul>				
	</div>
</div>

PS some code missing

 

.productImageFrame {
	float: left;
	width: 406px;
	min-height: 350px;
	border: 1px solid #8bc0c0;
	margin: 0px 0px;
}
.productImageMain{
	position: relative;
	overflow: hidden;
	width: 400px;
	height: 300px;
	border: 3px solid #FFF; 


}

.ImageMain img{
	width: auto;
	height: 300px;
	vertical-align: middle;
	text-align: center;
	

}
.ImageThumb ul{
	width: 406px;
}
.ImageThumb li {
	width: 75px;
	height: 75px;
	float: left;
	display: inline;
	margin: 3px;
	}
.ImageThumb img{
	width: 75px;
	height: 75px;
}	
 

the bug i have is when the image chages the holl page jump 2 the top

 

but hay it works and will now look at FlexSlider 2 will post l8er and tell you how i did with it

Edited September 12, 201312 yr by PumpkinHead