Browse Source

Added dynamic pager thumbnail creation

responsiveSlides now accepts thumb and thumbSrc options.
Thumb can be bg or img depending how thumbnail will be showed on pager.
Thub option requires pager to be set true.

Updated demo to reflect usage
pull/176/head^2
Tommi Pääkkö 12 years ago
parent
commit
4dfdfdb065
  1. 37
      demo/demo.css
  2. 30
      demo/demo.html
  3. 42
      responsiveslides.js
  4. 15
      responsiveslides.min.js

37
demo/demo.css

@ -44,7 +44,9 @@ p,h3,h4,pre {
}
#slider2,
#slider3 {
#slider3,
#slider5,
#slider6{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
@ -92,6 +94,39 @@ p,h3,h4,pre {
font-weight: bold;
}
/* Thumbnail stuff */
.rslides_thumbs li,
.rslides_thumbs a {
display : inline-block;
*display : block;
zoom : 1;
}
.rslides_thumbs a{
padding : 0;
border : 2px solid transparent;
margin-left : 2px;
margin-right : 2px;
}
.rslides_thumbs .rslides_here a{
border-color : #ccc;
}
.rslides_thumbs img{
max-width : 100%;
width : 50px;
}
.rslides_thumb {
display : block;
background-repeat : no-repeat;
background-position : 50% 50%;
height : 50px;
width : 50px;
}
a {
color: #fff;
text-decoration: none;

30
demo/demo.html

@ -47,6 +47,22 @@
}
});
// Slideshow 5
$("#slider5").responsiveSlides({
maxwidth : 540,
auto : false,
pager : true,
thumb : "bg",
thumbSrc : "thumb"
});
// Slideshow 6
$("#slider6").responsiveSlides({
maxwidth : 540,
auto : true,
pager : true,
thumb : "img"
});
});
</script>
</head>
@ -115,6 +131,20 @@
</ul>
<!-- Slideshow 5 -->
<ul id="slider5" class="rslides">
<li><img src="images/1.jpg" alt="" data-thumb="images/1_thumb.jpg"></li>
<li><img src="images/2.jpg" alt="" data-thumb="images/2_thumb.jpg"></li>
<li><img src="images/3.jpg" alt="" data-thumb="images/3_thumb.jpg"></li>
</ul>
<!-- Slideshow 6 -->
<ul id="slider6" class="rslides">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
<a href="http://responsiveslides.com/" id="download">See the documentation</a>
<p class="footer">ResponsiveSlides.js is created by <a href="http://viljamis.com">@viljamis</a>. It's released under the MIT license. If you have any questions or feedback you can use the <a href="https://github.com/viljami/ResponsiveSlides.js">GitHub project page</a>.</p>

42
responsiveslides.js

@ -6,7 +6,7 @@
* Available under the MIT license
*/
/*jslint browser: true, sloppy: true, vars: true, plusplus: true, indent: 2 */
/*jslint browser: true, vars: true, plusplus: true, indent: 2 */
(function ($, window, i) {
$.fn.responsiveSlides = function (options) {
@ -17,6 +17,8 @@
"speed": 500, // Integer: Speed of the transition, in milliseconds
"timeout": 4000, // Integer: Time between slide transitions, in milliseconds
"pager": false, // Boolean: Show pager, true or false
"thumb" : false, // String: Show a thumbnail in pager. Options: false, img = as image, bg = as background-image
"thumbSrc" : false, // String: Define a thumb src as a dataset (data-thumb="src" is called thumbSrc : 'thumb' ). Defaults to false (not set)
"nav": false, // Boolean: Show navigation, true or false
"random": false, // Boolean: Randomize the order of the slides, true or false
"pause": false, // Boolean: Pause on hover, true or false
@ -63,10 +65,13 @@
activeClass = namespace + "_here",
visibleClass = namespaceIdx + "_on",
slideClassPrefix = namespaceIdx + "_s",
pagerThumbsClass = namespace + "_thumbs",
thumbClass = namespace + "_thumb",
// Pager
$pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
// Styles for visible and hidden slides
visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},
@ -127,6 +132,11 @@
}
};
// If has thumbs add thumbclass
if (settings.thumb) {
$pager.addClass(pagerThumbsClass);
}
// Random order
if (settings.random) {
$slide.sort(function () {
@ -182,11 +192,37 @@
if (settings.pager && !settings.manualControls) {
var tabMarkup = [];
$slide.each(function (i) {
var n = i + 1;
var n = i + 1,
u,
e;
// Get the thumb src
if (settings.thumb) {
if (settings.thumbSrc) {
u = $(this).find('[data-'+ settings.thumbSrc+ ']').filter(':first').data(settings.thumbSrc);
}
// If we misspell dataset default to img src
if (!settings.thumbSrc || u === null) {
u = $(this).find('img').filter(':first').attr('src');
}
}
// If thumb is defined insert image as requested
// else insert number. Fallback to number
if (settings.thumb === 'img') {
e = '<img src="'+ u +'">';
} else if (settings.thumb === 'bg') {
e = '<span class='+ thumbClass +' style="background-image : url('+ u +')" />';
} else {
e = n ;
}
tabMarkup +=
"<li>" +
"<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
"<a href='#' class='" + slideClassPrefix + n + "'>" + e +"</a>" +
"</li>";
});
$pager.append(tabMarkup);

15
responsiveslides.min.js vendored

@ -1,8 +1,7 @@
/*! http://responsiveslides.com v1.53 by @viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:function(){},after:function(){}},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",
j=d+"_on",w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before();F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after()},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after();n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
/*! ResponsiveSlides.js v1.53
* http://responsiveslides.com
* http://viljamis.com
*
* Copyright (c) 2011-2012 @viljamis
* Available under the MIT license
*//*jslint browser: true, vars: true, plusplus: true, indent: 2 */(function(e,t,n){e.fn.responsiveSlides=function(r){var s=e.extend({auto:!0,speed:500,timeout:4e3,pager:!1,thumb:!1,thumbSrc:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:function(){},after:function(){}},r);return this.each(function(){n++;var o=e(this),u,a,f,l,c,h,p=0,d=o.children(),v=d.size(),m=parseFloat(s.speed),g=parseFloat(s.timeout),y=parseFloat(s.maxwidth),b=s.namespace,w=b+n,E=b+"_nav "+w+"_nav",S=b+"_here",x=w+"_on",T=w+"_s",N=b+"_thumbs",C=b+"_thumb",k=e("<ul class='"+b+"_tabs "+w+"_tabs' />"),L={"float":"left",position:"relative",opacity:1,zIndex:2},A={"float":"none",position:"absolute",opacity:0,zIndex:1},O=function(){var e=document.body||document.documentElement,t=e.style,n="transition";if(typeof t[n]=="string")return!0;u=["Moz","Webkit","Khtml","O","ms"];n=n.charAt(0).toUpperCase()+n.substr(1);var r;for(r=0;r<u.length;r++)if(typeof t[u[r]+n]=="string")return!0;return!1}(),M=function(t){s.before();if(O){d.removeClass(x).css(A).eq(t).addClass(x).css(L);p=t;setTimeout(function(){s.after()},m)}else d.stop().fadeOut(m,function(){e(this).removeClass(x).css(A).css("opacity",1)}).eq(t).fadeIn(m,function(){e(this).addClass(x).css(L);s.after();p=t})};s.thumb&&k.addClass(N);if(s.random){d.sort(function(){return Math.round(Math.random())-.5});o.empty().append(d)}d.each(function(e){this.id=T+e});o.addClass(b+" "+w);r&&r.maxwidth&&o.css("max-width",y);d.hide().css(A).eq(0).addClass(x).css(L).show();O&&d.show().css({"-webkit-transition":"opacity "+m+"ms ease-in-out","-moz-transition":"opacity "+m+"ms ease-in-out","-o-transition":"opacity "+m+"ms ease-in-out",transition:"opacity "+m+"ms ease-in-out"});if(d.size()>1){if(g<m+100)return;if(s.pager&&!s.manualControls){var _=[];d.each(function(t){var n=t+1,r,i;if(s.thumb){s.thumbSrc&&(r=e(this).find("[data-"+s.thumbSrc+"]").filter(":first").data(s.thumbSrc));if(!s.thumbSrc||r===null)r=e(this).find("img").filter(":first").attr("src")}s.thumb==="img"?i='<img src="'+r+'">':s.thumb==="bg"?i="<span class="+C+' style="background-image : url('+r+')" />':i=n;_+="<li><a href='#' class='"+T+n+"'>"+i+"</a>"+"</li>"});k.append(_);r.navContainer?e(s.navContainer).append(k):o.after(k)}if(s.manualControls){k=e(s.manualControls);k.addClass(b+"_tabs "+w+"_tabs")}(s.pager||s.manualControls)&&k.find("li").each(function(t){e(this).addClass(T+(t+1))});if(s.pager||s.manualControls){h=k.find("a");a=function(e){h.closest("li").removeClass(S).eq(e).addClass(S)}}if(s.auto){f=function(){c=setInterval(function(){d.stop(!0,!0);var e=p+1<v?p+1:0;(s.pager||s.manualControls)&&a(e);M(e)},g)};f()}l=function(){if(s.auto){clearInterval(c);f()}};s.pause&&o.hover(function(){clearInterval(c)},function(){l()});if(s.pager||s.manualControls){h.bind("click",function(t){t.preventDefault();s.pauseControls||l();var n=h.index(this);if(p===n||e("."+x).queue("fx").length)return;a(n);M(n)}).eq(0).closest("li").addClass(S);s.pauseControls&&h.hover(function(){clearInterval(c)},function(){l()})}if(s.nav){var D="<a href='#' class='"+E+" prev'>"+s.prevText+"</a>"+"<a href='#' class='"+E+" next'>"+s.nextText+"</a>";r.navContainer?e(s.navContainer).append(D):o.after(D);var P=e("."+w+"_nav"),H=P.filter(".prev");P.bind("click",function(t){t.preventDefault();var n=e("."+x);if(n.queue("fx").length)return;var r=d.index(n),i=r-1,o=r+1<v?p+1:0;M(e(this)[0]===H[0]?i:o);(s.pager||s.manualControls)&&a(e(this)[0]===H[0]?i:o);s.pauseControls||l()});s.pauseControls&&P.hover(function(){clearInterval(c)},function(){l()})}}if(typeof document.body.style.maxWidth=="undefined"&&r.maxwidth){var B=function(){o.css("width","100%");o.width()>y&&o.css("width",y)};B();e(t).bind("resize",function(){B()})}})}})(jQuery,this,0);
Loading…
Cancel
Save