[Javascript] Slider html: Mostrare immagini su 4 colonne

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Ciao Ragazzi, sto lavorando ad uno slider HTML CSS molto ben fatto e gratuito, potete vederlo e scaricare i sorgenti qui:
https://tympanus.net/codrops/2013/02/26/full-width-image-slider/

Attualmente è impostato per visualizzare una sola immagine per volta, invece vorrei mostrare 4 immagini per volta, vi allego 1 immagine di come deve venire per comprendere meglio e i codici sorgente.

Grazie a tutti in anticipo, ho provato intervenendo su questo codice JS ma senza soluzione:
Codice:
if( this.itemsCount > 1 )

HTML:
<div id="cbp-fwslider" class="cbp-fwslider">
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt="img01"/></a></li>
        <li><a href="#"><img src="images/2.jpg" alt="img02"/></a></li>
        <li><a href="#"><img src="images/3.jpg" alt="img03"/></a></li>
        <li><a href="#"><img src="images/4.jpg" alt="img04"/></a></li>
        <li><a href="#"><img src="images/5.jpg" alt="img05"/></a></li>
    </ul>
</div>
Codice JavaScript

Codice:
;( function( $, window, undefined ) {

    'use strict';

    // global
    var Modernizr = window.Modernizr;

    $.CBPFWSlider = function( options, element ) {
        this.$el = $( element );
        this._init( options );
    };

    // the options
    $.CBPFWSlider.defaults = {
        // default transition speed (ms)
        speed : 500,
        // default transition easing
        easing : 'ease'
    };

    $.CBPFWSlider.prototype = {
        _init : function( options ) {
            // options
            this.options = $.extend( true, {}, $.CBPFWSlider.defaults, options );
            // cache some elements and initialize some variables
            this._config();
            // initialize/bind the events
            this._initEvents();
        },
        _config : function() {

            // the list of items
            this.$list = this.$el.children( 'ul' );
            // the items (li elements)
            this.$items = this.$list.children( 'li' );
            // total number of items
            this.itemsCount = this.$items.length;
            // support for CSS Transitions & transforms
            this.support = Modernizr.csstransitions && Modernizr.csstransforms;
            this.support3d = Modernizr.csstransforms3d;
            // transition end event name and transform name
            var transProperties = {
                'WebkitTransition' : { transitionEndEvent : 'webkitTransitionEnd', tranformName : '-webkit-transform' },
                'MozTransition' : { transitionEndEvent : 'transitionend', tranformName : '-moz-transform' },
                'OTransition' : { transitionEndEvent : 'oTransitionEnd', tranformName : '-o-transform' },
                'msTransition' : { transitionEndEvent : 'MSTransitionEnd', tranformName : '-ms-transform' },
                'transition' : { transitionEndEvent : 'transitionend', tranformName : 'transform' }
            };
            if( this.support ) {
                this.transEndEventName = transProperties[ Modernizr.prefixed( 'transition' ) ].transitionEndEvent + '.cbpFWSlider';
                this.transformName = transProperties[ Modernizr.prefixed( 'transition' ) ].tranformName;
            }
            // current and old item´s index
            this.current = 0;
            this.old = 0;
            // check if the list is currently moving
            this.isAnimating = false;
            // the list (ul) will have a width of 100% x itemsCount
            this.$list.css( 'width', 100 * this.itemsCount + '%' );
            // apply the transition
            if( this.support ) {
                this.$list.css( 'transition', this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing );
            }
            // each item will have a width of 100 / itemsCount
            this.$items.css( 'width', 100 / this.itemsCount + '%' );
            // add navigation arrows and the navigation dots if there is more than 1 item
            if( this.itemsCount > 1 ) {

                // add navigation arrows (the previous arrow is not shown initially):
                this.$navPrev = $( '<span class="cbp-fwprev"><</span>' ).hide();
                this.$navNext = $( '<span class="cbp-fwnext">></span>' );
                $( '<nav/>' ).append( this.$navPrev, this.$navNext ).appendTo( this.$el );
                // add navigation dots
                var dots = '';
                for( var i = 0; i < this.itemsCount; ++i ) {
                    // current dot will have the class cbp-fwcurrent
                    var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
                    dots += dot;
                }
                var navDots = $( '<div class="cbp-fwdots"/>' ).append( dots ).appendTo( this.$el );
                this.$navDots = navDots.children( 'span' );

            }

        },
        _initEvents : function() {
            
            var self = this;
            if( this.itemsCount > 1 ) {
                this.$navPrev.on( 'click.cbpFWSlider', $.proxy( this._navigate, this, 'previous' ) );
                this.$navNext.on( 'click.cbpFWSlider', $.proxy( this._navigate, this, 'next' ) );
                this.$navDots.on( 'click.cbpFWSlider', function() { self._jump( $( this ).index() ); } );
            }

        },
        _navigate : function( direction ) {

            // do nothing if the list is currently moving
            if( this.isAnimating ) {
                return false;
            }

            this.isAnimating = true;
            // update old and current values
            this.old = this.current;
            if( direction === 'next' && this.current < this.itemsCount - 1 ) {
                ++this.current;
            }
            else if( direction === 'previous' && this.current > 0 ) {
                --this.current;
            }
            // slide
            this._slide();

        },
        _slide : function() {

            // check which navigation arrows should be shown
            this._toggleNavControls();
            // translate value
            var translateVal = -1 * this.current * 100 / this.itemsCount;
            if( this.support ) {
                this.$list.css( 'transform', this.support3d ? 'translate3d(' + translateVal + '%,0,0)' : 'translate(' + translateVal + '%)' );
            }
            else {
                this.$list.css( 'margin-left', -1 * this.current * 100 + '%' );   
            }
            
            var transitionendfn = $.proxy( function() {
                this.isAnimating = false;
            }, this );

            if( this.support ) {
                this.$list.on( this.transEndEventName, $.proxy( transitionendfn, this ) );
            }
            else {
                transitionendfn.call();
            }

        },
        _toggleNavControls : function() {

            // if the current item is the first one in the list, the left arrow is not shown
            // if the current item is the last one in the list, the right arrow is not shown
            switch( this.current ) {
                case 0 : this.$navNext.show(); this.$navPrev.hide(); break;
                case this.itemsCount - 1 : this.$navNext.hide(); this.$navPrev.show(); break;
                default : this.$navNext.show(); this.$navPrev.show(); break;
            }
            // highlight navigation dot
            this.$navDots.eq( this.old ).removeClass( 'cbp-fwcurrent' ).end().eq( this.current ).addClass( 'cbp-fwcurrent' );

        },
        _jump : function( position ) {

            // do nothing if clicking on the current dot, or if the list is currently moving
            if( position === this.current || this.isAnimating ) {
                return false;
            }
            this.isAnimating = true;
            // update old and current values
            this.old = this.current;
            this.current = position;
            // slide
            this._slide();

        },
        destroy : function() {

            if( this.itemsCount > 1 ) {
                this.$navPrev.parent().remove();
                this.$navDots.parent().remove();
            }
            this.$list.css( 'width', 'auto' );
            if( this.support ) {
                this.$list.css( 'transition', 'none' );
            }
            this.$items.css( 'width', 'auto' );

        }
    };

    var logError = function( message ) {
        if ( window.console ) {
            window.console.error( message );
        }
    };

    $.fn.cbpFWSlider = function( options ) {
        if ( typeof options === 'string' ) {
            var args = Array.prototype.slice.call( arguments, 1 );
            this.each(function() {
                var instance = $.data( this, 'cbpFWSlider' );
                if ( !instance ) {
                    logError( "cannot call methods on cbpFWSlider prior to initialization; " +
                    "attempted to call method '" + options + "'" );
                    return;
                }
                if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                    logError( "no such method '" + options + "' for cbpFWSlider instance" );
                    return;
                }
                instance[ options ].apply( instance, args );
            });
        }
        else {
            this.each(function() {   
                var instance = $.data( this, 'cbpFWSlider' );
                if ( instance ) {
                    instance._init();
                }
                else {
                    instance = $.data( this, 'cbpFWSlider', new $.CBPFWSlider( options, this ) );
                }
            });
        }
        return this;
    };

} )( jQuery, window );
 

Allegati

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.978
295
83
Ti sposto in javascript dovrebbe essere un problema di js
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, cambia
Codice:
this.$items.css('width', 100 / this.itemsCount + '%');
con
Codice:
this.$items.css('width', 25 / this.itemsCount + '%');
 

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Ciao, lo slider mostra correttamente gli elementi su 4 colonne. Il problema sorge per i pulsanti "Next" e "Prev" e i pallini di navigazione. che li aggiunge sempre quando il numero delle immagini è >1

Infatti avendo 6 immagini, mi mostra 6 pallini di navigazione

Ho provato a modificare in questo modo:

Codice:
// each item will have a width of 100 / itemsCount
            this.$items.css( 'width', 25 / this.itemsCount + '%' );
            // add navigation arrows and the navigation dots if there is more than 1 item
            if( this.itemsCount > 4 ) {

                // add navigation arrows (the previous arrow is not shown initially):
                this.$navPrev = $( '<span class="cbp-fwprev">&lt;</span>' ).hide();
                this.$navNext = $( '<span class="cbp-fwnext">&gt;</span>' );
                $( '<nav/>' ).append( this.$navPrev, this.$navNext ).appendTo( this.$el );
                // add navigation dots
                var dots = '';
                for( var i = 0; i < this.itemsCount; ++i ) {
                    // current dot will have the class cbp-fwcurrent
                    var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
                    dots += dot;
                }
                var navDots = $( '<div class="cbp-fwdots"/>' ).append( dots ).appendTo( this.$el );
                this.$navDots = navDots.children( 'span' );

            }

        }
Grazie ;)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Scusa non avevo visto la tua risposta, prova modificando il ciclo dei "pallini" cosi
Codice:
 // add navigation dots
                var dots = '';
                for (var i = 0; i < Math.ceil(this.itemsCount / 4); ++i) {
                    // current dot will have the class cbp-fwcurrent
                    var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
                    dots += dot;
                }
 
Ultima modifica:

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Ciao Criric, grazie per l'aiuto, però purtroppo non funziona comunque.

Di seguito lascio i due JavaScript sui quali lavora lo slider.
Sono costretta a fare due messaggi differenti (perchè c'è il limite dei 1000 caratteri)

Codice:
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
 

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Secondo file JS

Codice:
(function(c,b,e){var d=b.Modernizr;c.CBPFWSlider=function(f,g){this.$el=c(g);this._init(f)};c.CBPFWSlider.defaults={speed:500,easing:"ease"};c.CBPFWSlider.prototype={_init:function(f){this.options=c.extend(true,{},c.CBPFWSlider.defaults,f);this._config();this._initEvents()},_config:function(){this.$list=this.$el.children("ul");this.$items=this.$list.children("li");this.itemsCount=this.$items.length;this.support=d.csstransitions&&d.csstransforms;this.support3d=d.csstransforms3d;var h={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},k={WebkitTransform:"-webkit-transform",MozTransform:"-moz-transform",OTransform:"-o-transform",msTransform:"-ms-transform",transform:"transform"};if(this.support){this.transEndEventName=h[d.prefixed("transition")]+".cbpFWSlider";this.transformName=k[d.prefixed("transform")]}this.current=0;this.old=0;this.isAnimating=false;this.$list.css("width",100*this.itemsCount+"%");if(this.support){this.$list.css("transition",this.transformName+" "+this.options.speed+"ms "+this.options.easing)}this.$items.css("width",25/this.itemsCount+"%");if(this.itemsCount>1){this.$navPrev=c('<span class="cbp-fwprev">&lt;</span>').hide();this.$navNext=c('<span class="cbp-fwnext">&gt;</span>');c("<nav/>").append(this.$navPrev,this.$navNext).appendTo(this.$el);var l="";for(var g=0;g<this.itemsCount;++g){var f=g===this.current?'<span class="cbp-fwcurrent"></span>':"<span></span>";l+=f}var j=c('<div class="cbp-fwdots"/>').append(l).appendTo(this.$el);this.$navDots=j.children("span")}},_initEvents:function(){var f=this;if(this.itemsCount>1){this.$navPrev.on("click.cbpFWSlider",c.proxy(this._navigate,this,"previous"));this.$navNext.on("click.cbpFWSlider",c.proxy(this._navigate,this,"next"));this.$navDots.on("click.cbpFWSlider",function(){f._jump(c(this).index())})}},_navigate:function(f){if(this.isAnimating){return false}this.isAnimating=true;this.old=this.current;if(f==="next"&&this.current<this.itemsCount-1){++this.current}else{if(f==="previous"&&this.current>0){--this.current}}this._slide()},_slide:function(){this._toggleNavControls();var g=-1*this.current*100/this.itemsCount;if(this.support){this.$list.css("transform",this.support3d?"translate3d("+g+"%,0,0)":"translate("+g+"%)")}else{this.$list.css("margin-left",-1*this.current*100+"%")}var f=c.proxy(function(){this.isAnimating=false},this);if(this.support){this.$list.on(this.transEndEventName,c.proxy(f,this))}else{f.call()}},_toggleNavControls:function(){switch(this.current){case 0:this.$navNext.show();this.$navPrev.hide();break;case this.itemsCount-1:this.$navNext.hide();this.$navPrev.show();break;default:this.$navNext.show();this.$navPrev.show();break}this.$navDots.eq(this.old).removeClass("cbp-fwcurrent").end().eq(this.current).addClass("cbp-fwcurrent")},_jump:function(f){if(f===this.current||this.isAnimating){return false}this.isAnimating=true;this.old=this.current;this.current=f;this._slide()},destroy:function(){if(this.itemsCount>1){this.$navPrev.parent().remove();this.$navDots.parent().remove()}this.$list.css("width","auto");if(this.support){this.$list.css("transition","none")}this.$items.css("width","auto")}};var a=function(f){if(b.console){b.console.error(f)}};c.fn.cbpFWSlider=function(g){if(typeof g==="string"){var f=Array.prototype.slice.call(arguments,1);this.each(function(){var h=c.data(this,"cbpFWSlider");if(!h){a("cannot call methods on cbpFWSlider prior to initialization; attempted to call method '"+g+"'");return}if(!c.isFunction(h[g])||g.charAt(0)==="_"){a("no such method '"+g+"' for cbpFWSlider instance");return}h[g].apply(h,f)})}else{this.each(function(){var h=c.data(this,"cbpFWSlider");if(h){h._init()}else{h=c.data(this,"cbpFWSlider",new c.CBPFWSlider(g,this))}})}return this}})(jQuery,window);
Grazie infinite per l'aiuto
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
i file che hia postato non sono leggibili comunque ho i sorgenti che avevi linkato. Cosa non funziona della modifica che ti ho fatto fare ? a me pare funzionare per i dots
 

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Attualmente ho 6 immagini nello slider, quindi avendo impostato la visualizzazione su 4 colonne dovrei vedere soltanto 2 dots (pallini), invece ne vedo 6.

In pratica lo script mi mostra tanti dots quante sono le immagini, esempio:
4 immagini 4 dots
5 immagini 5 dots
etc..
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
nella modifica che ti ho indicato questo codice
Codice:
 Math.ceil(this.itemsCount / 4)
limita i dots al numero di immagini diviso 4, in pratica le 2 pagine che ti servono.
in piu se modifichi anche l'hide() delle frecce nello stesso modo
Codice:
case (Math.ceil(this.itemsCount / 4)) - 1 :
le frecce scompaiono e appaiono in modo corretto
a questo indirizzo puoi vedere l'effetto del codice con le correzioni
 

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Perfetto, finalmente sono riuscita a capire il funzionamento! ho apportato le modifiche suggerite, eliminato la cache del browser e tutto funziona perfettamente, grazie Criric ;)

Sto facendo dei test sul mobile e restringendo lo schermo, continua a mostrare 4 colonne. E' complesso impostare il ridimensionamento (per schermi minori di x px mostrare le immagini su 1 colonna) ?

E' sufficiente lavorare sulle media query dei CSS o bisogna intervenire sul JavaScript?
Grazie mille ragazzi per avermi supportata :)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
devi intervenire sul javascript e dividere itemsCount in base alla risoluzione dello schermo. Visto che già includi la libreria modernizr dai un occhiata qui
 

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Ciao Criric, grazie mille o_O ma non mi funziona, ho seguito la guida e mi sono documentata anche da altre fonti ma senza successo.. allego il codice JS che ho modificato, sai dirmi dove è l'errore? io ho ragionato come se stessi dando un istruzione "if", quindi
"se lo schermo è x carica questo codice" .. inserisco il file in un nuovo messaggio (per il problema dei 1000 caratteri che sto superando)
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
hai sbagliato sintassi, se devi aggiungere un metodo ad un plugin devi seguire la sua
Codice:
,
        resizing: function () {
            if (Modernizr.mq("screen and (min-width:868px)")) {

            } else if (Modernizr.mq("screen and (max-width:867px)")) {

            }
        }
a dir la verità non ho mai modificato un plugin, se posso evito addirittura di usarli e non ho nemmeno mai utilizzato Modernizr.
Un modo più semplice ci sarebbe : a te serve la lunghezza dello schermo all'interno del plugin. Potresti aggiungerla nelle option.
Ti faccio un esempio :
Codice:
$.CBPFWSlider.defaults = {
        // default transition speed (ms)
        speed: 500,
        // default transition easing
        easing: 'ease',
        // numero di immagini per pagina
        divisore: function () {
            if ($(window).width() > 1000) {
                return 4;
            } else {
                return 1;
            }
        }
    };
in base alla lunghezza puoi assegnare alla option il numero di immagini da visualizzare.
Puoi utilizzarlo poi nelle modifiche che avevamo fatto prima, esempio per i dots
Codice:
 for (var i = 0; i < Math.ceil(this.itemsCount / this.options.divisore()); ++i) {
                    // current dot will have the class cbp-fwcurrent
                    var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
                    dots += dot;
                }
fai la stessa cosa per il width dell'immagine e per le frecce.
Le modifiche avverranno solamente al caricamento della pagina. Se vuoi divertiri a stringere e allargare la finestra puoi richiamare il plugin al resize() della pagina.
HTML:
<script src="js/jquery.cbpFWSlider.js"></script>
        <script>
            $(function () {
                $('#cbp-fwslider').cbpFWSlider();
                $(window).resize(function () {
                    $('#cbp-fwslider').cbpFWSlider();
                });
            });
        </script>
E' solo un idea, bisogna vedere se funziona...
 

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Ciao.. mi sono seguita due piccoli corsi di Javascript e sto impazzendo su questi codici.. senza successo ;(
aggiungo le porzioni di codice modificato, dove sbaglio ? Grazie infinite

nelle option ho modificato cosi:
Codice:
   // the options
    $.CBPFWSlider.defaults = {
        // default transition speed (ms)
        speed: 500,
        // default transition easing
        easing: 'ease',
        // numero di immagini per pagina
        divisore: function () {
            if ($(window).width() > 1000) {
                return 4;
            } else {
                return 1;
            }
        }
    };
per le colonne e i dots ho utilizzato questo codice:
Codice:
            if ($(window).width() > 1000) {
                this.$items.css('width', 25 / this.itemsCount + '%');
            } else {
                this.$items.css('width', 100 / this.itemsCount + '%');
            }
            
          
            // add navigation arrows and the navigation dots if there is more than 1 item
            if (this.itemsCount > 1) {

                // add navigation arrows (the previous arrow is not shown initially):
                this.$navPrev = $('<span class="cbp-fwprev">&lt;</span>').hide();
                this.$navNext = $('<span class="cbp-fwnext">&gt;</span>');
                $('<nav/>').append(this.$navPrev, this.$navNext).appendTo(this.$el);
                // add navigation dots
                var dots = '';
                
                if ($(window).width() > 1000) {
                for (var i = 0; i < Math.ceil(this.itemsCount / 4); ++i) {
                    // current dot will have the class cbp-fwcurrent
                    var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
                    dots += dot;
                }
                
            } else {
                for (var i = 0; i < Math.ceil(this.itemsCount / 1); ++i) {
                    // current dot will have the class cbp-fwcurrent
                    var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
                    dots += dot;
                }
            }
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Codice:
/**
 * jquery.cbpFWSlider.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;
(function ($, window, undefined) {

    'use strict';

    // global
    var Modernizr = window.Modernizr;

    $.CBPFWSlider = function (options, element) {
        this.$el = $(element);
        this._init(options);
    };

    // the options
    $.CBPFWSlider.defaults = {
        // default transition speed (ms)
        speed: 500,
        // default transition easing
        easing: 'ease',
        // numero di immagini per pagina
        divisore: function () {
            if ($(window).width() > 1000) {
                return 4;
            } else {
                return 1;
            }
        }
    };

    $.CBPFWSlider.prototype = {
        _init: function (options) {
            // options
            this.options = $.extend(true, {}, $.CBPFWSlider.defaults, options);
            // cache some elements and initialize some variables
            this._config();
            // initialize/bind the events
            this._initEvents();
        },
        _config: function () {

            // the list of items
            this.$list = this.$el.children('ul');
            // the items (li elements)
            this.$items = this.$list.children('li');
            // total number of items
            this.itemsCount = this.$items.length;
            // support for CSS Transitions & transforms
            this.support = Modernizr.csstransitions && Modernizr.csstransforms;
            this.support3d = Modernizr.csstransforms3d;
            // transition end event name and transform name
            // transition end event name
            var transEndEventNames = {
                'WebkitTransition': 'webkitTransitionEnd',
                'MozTransition': 'transitionend',
                'OTransition': 'oTransitionEnd',
                'msTransition': 'MSTransitionEnd',
                'transition': 'transitionend'
            },
            transformNames = {
                'WebkitTransform': '-webkit-transform',
                'MozTransform': '-moz-transform',
                'OTransform': '-o-transform',
                'msTransform': '-ms-transform',
                'transform': 'transform'
            };

            if (this.support) {
                this.transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ] + '.cbpFWSlider';
                this.transformName = transformNames[ Modernizr.prefixed('transform') ];
            }
            // current and old item´s index
            this.current = 0;
            this.old = 0;
            // check if the list is currently moving
            this.isAnimating = false;
            // the list (ul) will have a width of 100% x itemsCount
            this.$list.css('width', 100 * this.itemsCount + '%');
            // apply the transition
            if (this.support) {
                this.$list.css('transition', this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing);
            }
            // each item will have a width of 100 / itemsCount
            this.$items.css('width', (100 / this.options.divisore()) / this.itemsCount + '%');
            // add navigation arrows and the navigation dots if there is more than 1 item
            if (this.itemsCount > 1) {

                // add navigation arrows (the previous arrow is not shown initially):
                this.$navPrev = $('<span class="cbp-fwprev">&lt;</span>').hide();
                this.$navNext = $('<span class="cbp-fwnext">&gt;</span>');
                $('<nav/>').append(this.$navPrev, this.$navNext).appendTo(this.$el);
                // add navigation dots
                var dots = '';
                for (var i = 0; i < Math.ceil(this.itemsCount / this.options.divisore()); ++i) {
                    // current dot will have the class cbp-fwcurrent
                    var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>';
                    dots += dot;
                }
                var navDots = $('<div class="cbp-fwdots"/>').append(dots).appendTo(this.$el);
                this.$navDots = navDots.children('span');

            }

        },
        _initEvents: function () {

            var self = this;
            if (this.itemsCount > 1) {
                this.$navPrev.on('click.cbpFWSlider', $.proxy(this._navigate, this, 'previous'));
                this.$navNext.on('click.cbpFWSlider', $.proxy(this._navigate, this, 'next'));
                this.$navDots.on('click.cbpFWSlider', function () {
                    self._jump($(this).index());
                });
            }

        },
        _navigate: function (direction) {

            // do nothing if the list is currently moving
            if (this.isAnimating) {
                return false;
            }

            this.isAnimating = true;
            // update old and current values
            this.old = this.current;
            if (direction === 'next' && this.current < this.itemsCount - 1) {
                ++this.current;
            }
            else if (direction === 'previous' && this.current > 0) {
                --this.current;
            }
            // slide
            this._slide();

        },
        _slide: function () {

            // check which navigation arrows should be shown
            this._toggleNavControls();
            // translate value
            var translateVal = -1 * this.current * 100 / this.itemsCount;
            if (this.support) {
                this.$list.css('transform', this.support3d ? 'translate3d(' + translateVal + '%,0,0)' : 'translate(' + translateVal + '%)');
            }
            else {
                this.$list.css('margin-left', -1 * this.current * 100 + '%');
            }

            var transitionendfn = $.proxy(function () {
                this.isAnimating = false;
            }, this);

            if (this.support) {
                this.$list.on(this.transEndEventName, $.proxy(transitionendfn, this));
            }
            else {
                transitionendfn.call();
            }

        },
        _toggleNavControls: function () {

            // if the current item is the first one in the list, the left arrow is not shown
            // if the current item is the last one in the list, the right arrow is not shown
//            console.log(this.current + " c " + this.itemsCount);
            switch (this.current) {
                case 0 :
                    this.$navNext.show();
                    this.$navPrev.hide();
                    break;
                case Math.ceil(this.itemsCount / this.options.divisore()) :
                    this.$navNext.hide();
                    this.$navPrev.show();
                    break;
                default :
                    this.$navNext.show();
                    this.$navPrev.show();
                    break;
            }
            // highlight navigation dot
            this.$navDots.eq(this.old).removeClass('cbp-fwcurrent').end().eq(this.current).addClass('cbp-fwcurrent');

        },
        _jump: function (position) {

            // do nothing if clicking on the current dot, or if the list is currently moving
            if (position === this.current || this.isAnimating) {
                return false;
            }
            this.isAnimating = true;
            // update old and current values
            this.old = this.current;
            this.current = position;
            // slide
            this._slide();

        },
        destroy: function () {

            if (this.itemsCount > 1) {
                this.$navPrev.parent().remove();
                this.$navDots.parent().remove();
            }
            this.$list.css('width', 'auto');
            if (this.support) {
                this.$list.css('transition', 'none');
            }
            this.$items.css('width', 'auto');

        }
    };

    var logError = function (message) {
        if (window.console) {
            window.console.error(message);
        }
    };

    $.fn.cbpFWSlider = function (options) {
        if (typeof options === 'string') {
            var args = Array.prototype.slice.call(arguments, 1);
            this.each(function () {
                var instance = $.data(this, 'cbpFWSlider');
                if (!instance) {
                    logError("cannot call methods on cbpFWSlider prior to initialization; " +
                            "attempted to call method '" + options + "'");
                    return;
                }
                if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
                    logError("no such method '" + options + "' for cbpFWSlider instance");
                    return;
                }
                instance[ options ].apply(instance, args);
            });
        }
        else {
            this.each(function () {
                var instance = $.data(this, 'cbpFWSlider');
                if (instance) {
                    instance._init();
                }
                else {
                    instance = $.data(this, 'cbpFWSlider', new $.CBPFWSlider(options, this));
                }
            });
        }
        return this;
    };

})(jQuery, window);
 

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
29
Ok risolto, tutto funziona perfettamente. Adesso creo differenti viste per schermi differenti, 1,2 0 4 colonne
Grazie infinite Criric ;)
 
  • Like
Reactions: criric