slide show

**Fari** · 19-03-2014, 18:04

Ciao a tutti! sto cercando di terminare un piccolo sito. Premetto, sono appassionata di programmazione html ma alle prime armi e questa che vi posto di seguito è l'immagine della prima pagina... Ho provato ad inserire una slide show in corrispondenza della fotografia per avere l'effetto delle 5 immagini che si susseguono in dissolvenza, ma non riesco. Succede di tutto: si carica sotto, in piccolo, in grande, ma mai in corrispondenza della foto e mai con l'effetto desiderato: che sia legato al fatto che è disposto su 2 colonne, è dovuto ad un'impostazione dei fogli css, alla querj o a cos'altro? come posso fare?

Vorrei ricreare l'effetto http://galleria.io/themes/miniml/ ma la visualizzazione senza il click del mouse.
Immagine.JPG
Ringrazio da subito per ogni consiglio!

**carlomarangoni** · 19-03-2014, 18:51

Per ottenere quell'effetto ti basta copiare il codice di quella pagina, ma poi si dovrebbe fare delle modifiche per fare l'avanzamento senza click. Come dovrebbe essere l'avanzamento senza click?

**Fari** · 19-03-2014, 19:08

Per l'avanzamento senza click intendo impostare 4000 (4secondi) per poi passare in automatico tramite dissolvenza alla foto successiva. Io ho copiato il codice della pagina ma gia il fatto di avere 2 colonne mi da problemi, sposta tutto sotto e comunque non va... :-(
Per le 2 colonne avrei trovato questo caso analogo, faccio le foto con le stesse dimensioni, le carico ma non mi funziona la slide show.... sigh
http://www.ezweb.it/224/creare_una_s...ssolvenza.html

**carlomarangoni** · 19-03-2014, 19:45

Forse sono rintronato ma non capiscpo il fatto delle due colonne, lo slide non deve stare su una sola colonna, perché due?

**Fari** · 19-03-2014, 20:47

tranquillo, forse non mi son spiegata io bene. Lo slide show deve stare sulla colonna di dx mentre sulla colonna di sx c'e' il logo in verticale che resta immobile. E' solo l'immagine di destra che deve alternarsi con altre 4 con la slide show o carousel item che dir si voglia. ma se io copio le stringhe:

codice:

<script type="text/javascript">
$(function(){
    $('#show1 img:gt(0)').hide();
    setInterval(function(){$('#show1 :first-child').fadeOut().next('img').fadeIn().end().appendTo('#show1');}, 3000);
});
</script>

<div id="show1"  class="fadein" style="height: 156px; width: 201px;">
  <img src="/files/immagini/slide/immagine1.jpg" /> 
  <img src="/files/immagini/slide/immagine2.jpg" /> 
  <img src="/files/immagini/slide/immagine3.jpg" /> 
</div> <div class="clear">&nbsp;</div>

ovviamente dando le dimensioni dell'immagine e i nomi dei jpg, mi appare comunque a fondo pagina...... e non funziona....:-(

**carlomarangoni** · 20-03-2014, 00:56

Prova così

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>  
<script type="text/javascript" src="jquery-1.7.min.js"></script> 
<script type="text/javascript" src="jquery.qtip.min.js"></script> 
</head>
<body>
<script type="text/javascript">// <=!=[=C=D=A=T=A=[
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
// ]=]=></script>
<div class="fadein" style="height: 156px; width: 201px;">
<img src="01.jpg" height="200" width="200" /> 
<img src="02.jpg" height="200" width="200" /> 
<img src="03.jpg" height="200" width="200" />
</div>
</body>
</html>

devi però scaricare i file jquery

**Fari** · 20-03-2014, 11:36

ho provato come hai detto tu, funziona anche se mi fa effetto dissolvenza verso ib basso ma per ora questo non importa. il problema ritorna nel momento in cui voglio la colonna laterale:

prima colonna

codice:

<div style="width:100%" align="center">
      <table style="width: 947px; height: 581px;" cellpadding="0" cellspacing="5">
        <tbody>
          <tr>
            <td><br>
            </td>
            <td style="margin-left: 100px; height: 538px;"> <img style="width: 70px; margin-top: 20px; height: 566px;"

                src="1_files/Graficacopia.jpg"

                width="50"> </td>
            <td><br>
            </td>

per la seconda colonna scrivo:

codice:

 <script type="text/javascript.js">//
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
// ]]></script>
                              <div class="fadein" style="height: 156px; width: 201px;">
                                <img style="display: block;" src="slide_files/1.jpg"

                                  height="566" width="847"><img style="display: none;"

                                  src="slide_files/2.jpg"

                                   height="566" width="847"><img style="display: none;"

                                   src="slide_files/3.jpg"

                                   height="566" width="847"> </div>
                              <div class="clear">&nbsp;</div>
                            </td>

spero di non aver pasticciato troppo...

**Vincent.Zeno** · 20-03-2014, 12:28

@Fari,
per postare codice su forum, usa la modalità avanzata. li trovi il tasto # per racchiudere il codice all'interno del tag [CODE]

grazie

**Fari** · 20-03-2014, 13:54

ok, non sapevo...

**Fari** · 29-03-2014, 23:45

ho risolto! grazie

Discussione: slide show

Strumenti discussione

Ricerca discussione

Visualizza

slide show

Permessi di invio