Permalink
Browse files

v0.3.0

  • Loading branch information...
1 parent a89a1f4 commit b0c5f2304190eb87c44c99579045abf3edd50b16 @dcdeiv committed May 1, 2015
Showing with 74 additions and 40 deletions.
  1. +25 −3 README.md
  2. +1 −1 bower.json
  3. +46 −34 jquery.jsonslider.js
  4. +2 −2 jquery.jsonslider.min.js
View
@@ -40,9 +40,31 @@ This is an example of how the function must be called with all available options
$( document ).ready(function() {
$( '.your-class' ).jsonSlider({
json: 'path-to-your-json-file.json',
- Class: 'slider-active' //default class
- orientation: 'landscape', //portrait not tested yet
- aspectRatio: '16:9' //aspect ratio of the slider. Chose it according to pictures aspect ratio.
+ Class: 'slider-active', //default class
+ aspectRatio: '16:9', //aspect ratio of the slider. Chose it according to pictures aspect ratio.
+ css: { //don't touch these parametres
+ parent: {
+ position: 'relative'
+ },
+ wrap: {
+ position: 'relative',
+ width: '100%',
+ height: '100%',
+ margin: '0 auto',
+ padding: 0,
+ backgroundColor: 'inherit',
+ overflow: 'hidden'
+ },
+ figure: {
+ position: 'absolute'
+ },
+ img: {
+ width: 'auto',
+ maxWidth: '100%',
+ lineHeight: 0,
+ margin: '0 auto'
+ }
+ }
});
});
View
@@ -1,6 +1,6 @@
{
"name": "jsonslider",
- "version": "0.2.0",
+ "version": "0.3.0",
"homepage": "http://www.github.com/dcdeiv/jsonslider",
"authors": [
"dcdeiv <davide.dicriscito@gmail.com>"
View
@@ -1,72 +1,84 @@
-//JSONslider v.0.2.0
+//JSONslider v.0.3.0
//http://www.github.com/dcdeiv/jsonslider
// GPLv2 http://www.gnu.org/licenses/gpl-2.0-standalone.html
(function($) {
$.fn.jsonSlider = function(options) {
- var $wrapW, newHeight, wrap,
+ var $parentW, $parentH, $wrap,
def = {
json: undefined,
Class: 'slider-active',
- orientation: 'landscape', //'portrait'
- aspectRatio: '16:9'
+ aspectRatio: '16:9',
+ css: {
+ parent: {
+ position: 'relative'
+ },
+ wrap: {
+ position: 'relative',
+ width: '100%',
+ height: '100%',
+ margin: '0 auto',
+ padding: 0,
+ backgroundColor: 'inherit',
+ overflow: 'hidden'
+ },
+ figure: {
+ position: 'absolute'
+ },
+ img: {
+ width: 'auto',
+ maxWidth: '100%',
+ lineHeight: 0,
+ margin: '0 auto'
+ }
+ }
},
cfg = $.extend(true, def, options),
store = cfg.json,
active = cfg.Class,
- orient = cfg.orientation,
aspect = cfg.aspectRatio,
- $wrap = $(this),
+ css = cfg.css,
+ $parent = $(this),
AR = aspect.split(':'),
ARx = parseInt(AR[0]),
ARy = parseInt(AR[1]),
arI = ARx / ARy;
- $wrapW = $wrap.width();
+ $parentW = parseInt($parent.css('width'));
+ $parentH = parseInt($parent.css('height'));
- $wrap.append('<div>');
- wrap = $wrap.children();
+ $parent.append('<div>');
+ $wrap = $parent.children();
$(window).resize(function() {
- if ('landscape' === orient) {
- newHeight = $wrapW / arI;
-
- $wrap.height(newHeight);
- } else if ('portrait' === orient) {
- newHeight = $wrapW * arI;
+ var parentStyle = {
+ height: $parentW / arI
+ },
+ newStyle = $.extend({}, css.parent, parentStyle);
- $wrap.height(newHeight);
+ if ($parentH === 0) {
+ $parent.css(newStyle);
}
- wrap.css({
- position: 'relative',
- width: $wrapW,
- minHeight: newHeight,
- margin: '0 auto',
- padding: 0,
- backgroundColor: 'inherit',
- overflow: 'hidden'
- });
+ $wrap.css(css.wrap);
});
$.getJSON(store, function(data) {
- var $figs, first, i,
+ var $figs, $first, i,
arr = $.map(data, function(el) {
return el;
});
for (i = 0; i < arr.length; i++) {
- wrap.append($('<figure><img src="' + arr[i].url + '" alt="' + arr[i].alt + '"/></figure>'));
+ $wrap.append($('<figure><img src="' + arr[i].url + '" alt="' + arr[i].alt + '"/></figure>'));
}
- $figs = wrap.children();
-
- $figs.children().height('height', newHeight);
-
- first = $figs.first();
+ $figs = $wrap.children();
+ $figs.css(css.figure);
- first.addClass(active);
+ $first = $figs.first();
+ $first.addClass(active);
- $figs.not(first).hide();
+ $figs.not($first).hide();
function slider(e) {
var $next,
@@ -1,4 +1,4 @@
-//JSONslider v.0.2.0
+//JSONslider v.0.3.0
//http://www.github.com/dcdeiv/jsonslider
// GPLv2 http://www.gnu.org/licenses/gpl-2.0-standalone.html
-!function(a){a.fn.jsonSlider=function(b){var c,d,e,f={json:void 0,Class:"slider-active",orientation:"landscape",aspectRatio:"16:9"},g=a.extend(!0,f,b),h=g.json,i=g.Class,j=g.orientation,k=g.aspectRatio,l=a(this),m=k.split(":"),n=parseInt(m[0]),o=parseInt(m[1]),p=n/o;c=l.width(),l.append("<div>"),e=l.children(),a(window).resize(function(){"landscape"===j?(d=c/p,l.height(d)):"portrait"===j&&(d=c*p,l.height(d)),e.css({position:"relative",width:c,minHeight:d,margin:"0 auto",padding:0,backgroundColor:"inherit",overflow:"hidden"})}),a.getJSON(h,function(b){function j(b){var d,e=a("."+b);d=0===e.next().length?c.first():e.next(),e.fadeOut(1e3,function(){a(this).removeClass(b)}),d.fadeIn(1e3,function(){a(this).addClass(b)})}var c,f,g,h=a.map(b,function(a){return a});for(g=0;g<h.length;g++)e.append(a('<figure><img src="'+h[g].url+'" alt="'+h[g].alt+'"/></figure>'));c=e.children(),c.children().height("height",d),f=c.first(),f.addClass(i),c.not(f).hide(),setTimeout(setInterval(function(){j(i)},4e3),5e3),a(window).resize()})}}(jQuery);
+!function(a){a.fn.jsonSlider=function(b){var c,d,e,f={json:void 0,Class:"slider-active",aspectRatio:"16:9",css:{parent:{position:"relative"},wrap:{position:"relative",width:"100%",height:"100%",margin:"0 auto",padding:0,backgroundColor:"inherit",overflow:"hidden"},figure:{position:"absolute"},img:{width:"auto",maxWidth:"100%",lineHeight:0,margin:"0 auto"}}},g=a.extend(!0,f,b),h=g.json,i=g.Class,j=g.aspectRatio,k=g.css,l=a(this),m=j.split(":"),n=parseInt(m[0]),o=parseInt(m[1]),p=n/o;c=parseInt(l.css("width")),d=parseInt(l.css("height")),l.append("<div>"),e=l.children(),a(window).resize(function(){var b={height:c/p},f=a.extend({},k.parent,b);0===d&&l.css(f),e.css(k.wrap)}),a.getJSON(h,function(b){function h(b){var d,e=a("."+b);d=0===e.next().length?c.first():e.next(),e.fadeOut(1e3,function(){a(this).removeClass(b)}),d.fadeIn(1e3,function(){a(this).addClass(b)})}var c,d,f,g=a.map(b,function(a){return a});for(f=0;f<g.length;f++)e.append(a('<figure><img src="'+g[f].url+'" alt="'+g[f].alt+'"/></figure>'));c=e.children(),c.css(k.figure),d=c.first(),d.addClass(i),c.not(d).hide(),setTimeout(setInterval(function(){h(i)},4e3),5e3),a(window).resize()})}}(jQuery);

0 comments on commit b0c5f23

Please sign in to comment.