nivo-slider immagini thumb e large

**claudia_c82** · 23-06-2014, 10:42

Buongiorno a tutti....

sto usando il plugin nivo-slider ma ci vorrei aggiungere la possibilità di cliccare su l'immagine corrente e ingrandirla, ma non con una light box, ma con una animazione di scorrimento di un div...
il codice l'ho inserito, ma il mio problema è che mi fa vedere sempre la prima immagine caricata e nn la corrente... questo è il codice

codice:

$('.nivoSlider').css('cursor','pointer'); //  visualizzo il cursore
$('.nivoSlider').click(function() {
      $("#boxCentro").animate({ left: '-3000' }, 1000); // faccio uscire il div con le thumb
      $("#boxMore").animate({ left: '0' }, 1000); // faccio entrare il div con le img grandi
     
      $("#boxMore").append("<img src='" + vars.currentImage.attr('data-thumb') + "'/>"); //Aggancio immagine grande
});

ma probabilmente sbaglio il puntoesatto dove inserire questo codice

potete aiutarmi?!

**cavicchiandrea** · 23-06-2014, 12:08

Prova questo $(this).attr('data-thumb') al posto di vars.currentImage.attr('data-thumb') anche se ho forti dubbi che funzioni

**claudia_c82** · 23-06-2014, 13:14

no infatti

il fatto è che prima estrapola la prima immagine e poi fa il ciclo, quindi questo codice lo scrivo in due posti....
però se metto un alert(vars.currentImage.attr('data-thumb'));
mi si apre la finestera con l'attributo giusto ma non l'append..... e nn capisco

**KillerWorm** · 23-06-2014, 18:52

Ciao, il codice che hai postato è incompleto per poter capire quale sia il problema che descrivi.

La variabile "vars" non è definita. Presumo si riferisca a qualcosa tipo .data("nivo:vars") relativo all'oggetto nivoSlider.

Hai scritto comunque che l'attributo è giusto, quindi la parte di script in cui viene prelevato sta funzionando correttamente.
Se non ti appende l'immagine, presumibilmente l'errore sta da un'altra parte.

Infatti scrivi:

il fatto è che prima estrapola la prima immagine e poi fa il ciclo, quindi questo codice lo scrivo in due posti....

Quale "ciclo"?
Quali sono questi "due posti"?

Forse l'errore dipende da queste altre cose di cui non ci hai fornito indicazioni.

Ad ogni modo ho fatto qualche prova per ciò che hai indicato. Se provo ad appendere l'immagine corrente sul div boxMore, non noto particolari problemi.
Ti posto il codice della prova che ho fatto:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prova</title>
    <link rel="stylesheet" href="./themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./demo/style.css" type="text/css" media="screen" />
    <style type="text/css">
      #boxMore>img{width:200px;} /* riduco la dimensione delle immagini appese giusto per vederle sulla pagina senza creare un div chilometrico */
    </style>
    <script src="./demo/scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="./jquery.nivo.slider.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#slider').nivoSlider();
        $('.nivoSlider').css('cursor','pointer'); //  visualizzo il cursor
        $('.nivoSlider').click(function() {
          var vars = $(this).data("nivo:vars"); // ---> le vars di questo oggetto nivoSlider
          var src = vars.currentImage.attr('src'); // ---> src dell'immagine corrente, in questo caso funzionerebbe allo stesso modo con attr('data-thumb') dato che fanno riferimento allo stesso file
          $("#boxMore").append("<img src='" + src + "'/>"); //Aggancio immagine grande
        });
      });
    </script>
  </head>
  <body>
    <div id="wrapper">
      <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
          <img src="./demo/images/toystory.jpg" data-thumb="./demo/images/toystory.jpg" alt="" />
          <img src="./demo/images/up.jpg" data-thumb="./demo/images/up.jpg" alt="" title="This is an example of a caption" />
          <img src="./demo/images/walle.jpg" data-thumb="./demo/images/walle.jpg" alt="" data-transition="slideInLeft" />
          <img src="./demo/images/nemo.jpg" data-thumb="./demo/images/nemo.jpg" alt="" title="#htmlcaption" />
        </div>
      </div>
    </div>
    <div id="boxMore"><div>
  </body>
</html>

Ho usato i file e le immagini di esempio scaricabili col plugin jQuery dal relativo sito dev7studios.com/plugins/nivo-slider
Per provare il codice basta creare il file e inserirlo nella cartella "nivo-slider".

Ripeto, non mi pare ci siano problemi nel prelevare e appendere l'immagine. L'unico problema che ho riscontrato avviene quando clicco sui pulsanti freccia prev/next che stanno sulle immagini. In questo caso l'evento click impostato direttamente sull'elemento nivoSlide può generare qualche conflitto con l'evento click di tali pulsanti. Ma questo è un altro discorso.

**claudia_c82** · 24-06-2014, 10:13

Funziona

grazie grazie grazie......
probabilmente sbagliavo a voler aggiungere codice in "posti" sbagliati

ho racchiuso in una function e aggiunto il remove() dell'immagine grande altrimenti aggiungeva sempre immagini invece di sostituire...

questo è il codice che funziona

codice:

    $(window).load(function() {
        $('#slider').nivoSlider();
        $('.nivoSlider').css('cursor','pointer'); //  visualizzo il cursor
        $('.nivoSlider').click(function() {
          var vars = $(this).data("nivo:vars"); // ---> le vars di questo oggetto nivoSlider
           var src = vars.currentImage.attr('data-thumb'); // ---> src  dell'immagine corrente, in questo caso funzionerebbe allo stesso modo  con attr('data-thumb') dato che fanno riferimento allo stesso file
          $("#boxCentro").animate({ left: '-3000' }, 1000);
        $("#boxMore").animate({ left: '0' }, 1000);
        $("#boxMore").append("<img src='" + src + "'/>"); //Aggancio immagine grande
        });
        $('.more_close').click(function() {
            $("#boxMore img:last-child").remove(); // Rimuovo l'immagine grande 
        });

      });

grazie ancora
Claudia

**KillerWorm** · 24-06-2014, 11:35

Bene.

ho racchiuso in una function e aggiunto il remove() dell'immagine grande altrimenti aggiungeva sempre immagini invece di sostituire...

Per sostituire direttamente tutto il contenuto di un elemento si usa .html() anziché .append()

codice:

$("#boxMore").html("<img src='" + src + "'/>");

Discussione: nivo-slider immagini thumb e large

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

nivo-slider immagini thumb e large

Permessi di invio