Single Responsive Photo Gallery plus Slideshow

[JavaScriptBank]

Currently, there are many JavaScript photo slideshow scripts, detail at JavaScriptBank.com - 2.000+ free JavaScript codes

http://www.javascriptbank.com/javasc...-slideshow.jpg
Demo: JavaScript Single Responsive Photo Gallery plus Slideshow

How to setup

Step 1: Place CSS below in your HEAD section
CSS

<link rel="stylesheet" type="text/css" href="srpgs.css"/>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="srpgs.js"></script>
<script type="text/javascript">
/*
* Project	:	Single Responsive Photo Gallery plus Slideshow
* Author	:	Phong Thai (http://www.javascriptbank.com/)
* Support	:	http://www.javascriptbank.com/
* Version	:	1.0
*/

/*
	You are free to use this plugin in any personal, commercial project without my permission.
	But please help me by leaving the Copyright sign, it just occupies about 10 pixels, 
	otherwise please help me with a milk coffee (paypal) to remove this sign.
*/

var srpgs_slideshowSpeed = 5000,	// speed of the automatic slideshow
	srpgs_scroll_delay = 700,		// speed of the scrolling controls
	srpgs_path_pics = 'pics/';		// path to large photos
	srpgs_path_thumb = 'pics/thumbnails/';

var srpgs_photos = [ {
		"image" : "srpgs-01.jpg"
	}, {
		"image" : "srpgs-02.jpg"
	}, {
		"image" : "srpgs-03.jpg"
	}, {
		"title" : "Title of Photo #04",
		"image" : "srpgs-04.jpg",
		"url" : "http://www.yoursite.com/photo-set-01/",
		"subject" : "#04 in Subject of Set #1"
	}, {
		"title" : "Title of Photo #05",
		"image" : "srpgs-05.jpg",
		"url" : "http://www.yoursite.com/photo-set-01/",
		"subject" : "#05 in Subject of Set #1"
	}, {
		"title" : "Title of Photo #06",
		"image" : "srpgs-06.jpg",
		"url" : "http://www.yoursite.com/photo-set-02/",
		"subject" : "Subject of Set #2: Photo #06"
	}, {
		"title" : "",
		"image" : "srpgs-07.jpg",
		"url" : "",
		"subject" : ""
	}, {
		"title" : "Title of Photo #08",
		"image" : "srpgs-08.jpg",
		"url" : "http://www.yoursite.com/photo-set-02/",
		"subject" : "Subject of Set #2: Photo #08"
	}, {
		"image" : "srpgs-09.jpg"
	}, {
		"image" : "srpgs-10.jpg"
	}, {
		"image" : "srpgs-11.jpg"
	}, {
		"image" : "srpgs-12.jpg"
	}, {
		"image" : "srpgs-13.jpg"
	}, {
		"image" : "srpgs-14.jpg"
	}, {
		"image" : "srpgs-15.jpg"
	}, {
		"image" : "srpgs-16.jpg"
	}, {
		"image" : "srpgs-17.jpg"
	}, {
		"image" : "srpgs-18.jpg"
	}
];
</script>

Step 3: Place HTML below in your BODY section
HTML

<div class="srpgs-container">
	<!-- Photo placeholders -->
	<div id="srpgs-slideshow">
		<div id="srpgs-rotate-1" class="srpgs-holder"><img src="" /></div>
		<div id="srpgs-rotate-2" class="srpgs-holder"><img src="" /></div>
	</div>
	
	<!-- Photo slideshow controls -->
	<div id="srpgs-control">
		<div class="srpgs-thumbs-nav copyright"><a href="http://www.javascriptbank.com" title="Copyright 2013">+</a></div>
		<div class="srpgs-thumbs-nav up"></div>
		<div id="srpgs-thumbs-gallery"></div>
		<div class="srpgs-thumbs-nav down"></div>
		<div id="srpgs-control-btns">
			<div id="srpgs-control-back"></div>
			<div id="srpgs-control-play-pause"></div>
			<div id="srpgs-control-next"></div>
		</div>
	</div>
	
	<!-- Titles and subjects of the photos -->
	<div id="srpgs-picture">
		<span id="srpgs-picture-title"></span>
		<p class="srpgs-picture-link">
			In: <a href="#" id="srpgs-picture-url"></a>
		</p>
	</div>
</div>

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()

[kashifalijugnoo]

I think using animate() function of jquery will result in slide show if the sliding element position is set to relative.
Any one can make slide show while using this technique.

[williamforrest]

its not that responsive as you have said it should be, if you view it by portrait mode there is a big white space at the bottom.. i think it is better to fill the whole screen with image itself..

[freewarefiles2u]

very nice
thanks aloot