Register on the forum now to remove ALL ads + popups + get access to tons of hidden content for members only!

Go Back   Site Owners Forums - Webmaster Forums > Web Programming > Programming General > Javascript

Notices


Reply
 
Thread Tools Rate Thread Display Modes
Old 06-21-2013, 08:35 PM   #1
JavaScriptBank
Registered User
 
Join Date: Jul 2009
Posts: 190
Single Responsive Photo Gallery plus Slideshow

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


How to setup

Step 1: Place CSS below in your HEAD section
CSS
Code:
<link rel="stylesheet" type="text/css" href="srpgs.css"/>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<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
Code:
<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>





JavaScriptBank is offline   Reply With Quote

Old 10-23-2013, 05:55 AM   #2
kashifalijugnoo
Registered User
 
Join Date: Oct 2013
Posts: 5
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.
kashifalijugnoo is offline   Reply With Quote
Old 12-09-2013, 11:17 PM   #3
williamforrest
Registered User
 
Join Date: Oct 2013
Posts: 17
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..
williamforrest is offline   Reply With Quote
Old 01-27-2014, 07:08 AM   #4
freewarefiles2u
Registered User
 
Join Date: Jan 2014
Posts: 5
very nice
thanks aloot
__________________
freewarefiles2u is offline   Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
shared hosting to host web gallery ncjbhd Hosting Discussion 15 09-26-2014 03:22 AM
How many H1 tags on a single web page? jamesranatte Review My Website 4 01-16-2014 10:26 PM
Can i use both Google Analytics and Statcounter with a single site? noahwilson Search Engine Optimization 1 04-30-2013 02:04 AM
65 Free JavaScript Photo Gallery Solutions JavaScriptBank Javascript 0 04-15-2013 06:38 PM
Single javascript across multiple pages. mjvndhsb HTML / DHTML 0 09-28-2011 02:07 AM


All times are GMT -7. The time now is 08:37 AM.


Powered by vBulletin Copyright © 2013 vBulletin Solutions, Inc.