[Javascript] Slider html: Mostrare immagini su 4 colonne

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
34
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

  • slider-4-colonne.png
    slider-4-colonne.png
    36,8 KB · Visite: 433

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
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
34
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
34
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
34
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
34
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
34
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
34
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:

smanimania

Nuovo Utente
10 Gen 2017
18
2
3
34
Allego il file JS.
Grazie e a presto
 

Allegati

  • slider.js.zip
    3 KB · Visite: 356
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
34
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
34
Ok risolto, tutto funziona perfettamente. Adesso creo differenti viste per schermi differenti, 1,2 0 4 colonne
Grazie infinite Criric ;)
 
  • Like
Reactions: criric
Discussioni simili
Autore Titolo Forum Risposte Data
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
I Aiuto uso Nivo Slider con javascript jQuery 2
J Horizontal Slider JavaScript v2.2 Javascript 0
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 18
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0

Discussioni simili