JavaScriptBank
06-22-2013, 12:50 AM
Helpful JavaScript for Web development
Single Responsive Photo Gallery plus Slideshow
Currently, there are many JavaScript photo slideshow scripts (http://www.javascriptbank.com/=JavaScript photo slideshow scripts), detail (http://www.javascriptbank.com/=jQuery picture sho... http://www.javascriptbank.com/javascript.images/project/single-responsive-photo-gallery-plus-slideshow.jpg (http://www.javascriptbank.com/javascript/project/single-responsive-photo-gallery-plus-slideshow/preview/en/)
Demo: JavaScript Single Responsive Photo Gallery plus Slideshow (http://www.javascriptbank.com/single-responsive-photo-gallery-plus-slideshow.html/en/)
[/CENTER]
[U]How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
<link rel="stylesheet" type="text/css" href="srpgs.css"/>
Step 2: Place JavaScript 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: Copy & Paste HTML code 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 Enlarge Image (http://www.javascriptbank.com/enlarge-image-2.html/en/) - JavaScript Fading Slide Show (http://www.javascriptbank.com/fading-slide-show.html) - JavaScript Rotating Image script (http://www.javascriptbank.com/rotating-image-script.html)
The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.
Single Responsive Photo Gallery plus Slideshow
Currently, there are many JavaScript photo slideshow scripts (http://www.javascriptbank.com/=JavaScript photo slideshow scripts), detail (http://www.javascriptbank.com/=jQuery picture sho... http://www.javascriptbank.com/javascript.images/project/single-responsive-photo-gallery-plus-slideshow.jpg (http://www.javascriptbank.com/javascript/project/single-responsive-photo-gallery-plus-slideshow/preview/en/)
Demo: JavaScript Single Responsive Photo Gallery plus Slideshow (http://www.javascriptbank.com/single-responsive-photo-gallery-plus-slideshow.html/en/)
[/CENTER]
[U]How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
<link rel="stylesheet" type="text/css" href="srpgs.css"/>
Step 2: Place JavaScript 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: Copy & Paste HTML code 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 Enlarge Image (http://www.javascriptbank.com/enlarge-image-2.html/en/) - JavaScript Fading Slide Show (http://www.javascriptbank.com/fading-slide-show.html) - JavaScript Rotating Image script (http://www.javascriptbank.com/rotating-image-script.html)
The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.