Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25

    slideshow fading effect

    Ciao a tutti, ho letto la guida, ma non riesco a capire il funzionamento dei js, lo trovo ancora troppo complicato, e per capirlo meglio dovrei avere un pò più di esempi visivi forse. Anche se nel mio sito sto pensando di inserire un accordion ed uno slideshow con fading effect, che trovai una decina di anni fa circa in rete, carino, semplice nella presentazione, ma che non riesco a far funzionare nel modo che vorrei, nel senso:

    - Ho capito come personalizzare alcuni aspetti come i caratteri delle didascalie, il tempo di scorrimento per ciascuna foto, e cose così, ma non come settare il posizionamento del riquadro delle immagini;

    - Prima di inserire lo script dello slideshow, c'era un div inline con quello del testo, con una singola immagine, con sotto un altro div contenente un menu, dopo lo script il menu è sparito, coperto presumo dalle immagini dello slide che però sono nascoste.

    L'accordion lo vorrei usare nel div testo per sfogliare i vari capitoli, un pò alla wikipedia quando con il click apre il capitolo o le sezioni... ma anche lì avrei bisogno di qualcuno che mi spieghi cosa e come settare per una personalizzazione minima.
    Consigli, pareri, critiche e complimenti sono ben accetti

    Allego codici HTML, CSS e JS, in quanto la pagina ancora non è stata caricata.
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  2. #2
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    index2col.html

    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"     "http://www.w3.org/TR/html4/frameset.dtd">
    <html>
    <head>
     <title>nome sito</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="language" scheme="RFC1766" content="it">
        <meta http-equiv="Content-Type" charset=UTF-8">
         <link rel="stylesheet" href="css/style2col.css" type="text/css" media="all" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <script type="text/javascript" src="./js/slideshow/jquery.imageFading.js"></script>
            <script type="text/javascript" src="./js/slideshow/slideshow.js"></script>
    </head>
    <body>
        <div id="telaio">
        <div id="banner"><img src="immagini/torino_skyline2.jpg" title="Guida" alt="Guida" /></div>
        <div id="logo"><img src="Alice_logo_small.png" /></div><!--
        --><div id="menu_s">MENU PICCOLO: qua metterò un piccolo menu per agevolare la visione del sito nella parte altadella pagina.</div>
        <div id="menu_ph"><a href="#testo"><img src="immagini/menu_ph/torino-logo.jpg" title="Guide cittadine" alt="Torino" /></a>
         <a href="#testo"><img src="immagini/menu_ph/castello_bt.jpg" title="Galleria fotografica" alt="Torino" /></a>
         <a href="#testo"><img src="immagini/menu_ph/tuvalu.jpg" title="About us, contatti, servizi, partners" alt="Torino" /></a>
         <a href="#testo"><img src="immagini/menu_ph/parco_bt.jpg" title="Eventi" alt="Torino" /></a>
        </div>
        <div id="skin"><img src="immagini/torino_skyline2bn.jpg" title="Torino" alt="Torino" /></div>
        </div>
        <div id="telaio2">
            <div id="content">
        <div id="testo">
                <a name="testo"><h1>Chapter I</h1></a>
                <h2>Down the Rabbit-Hole</h2>
                <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?'</p>
                <p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
                <p>There was nothing so VERY remarkable in that; nor did Alice think it so VERY much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually TOOK A WATCH OUT OF ITS WAISTCOAT-POCKET, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
                <p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
                <p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
        <div id="video">
                <iframe width="350" height="200" name="iframe" src="https://www.youtube.com/embed/cu3K1njbYqs?list=RDcu3K1njbYqs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                Contenuto alternativo per i browser che non leggono gli iframe.
                </iframe>
        </div>
        </div>
        <div id="slide"><img src="./immagini/slide/torino-logo.jpg" title="Torino" alt="Torino" />
                <img src="./immagini/slide/castello_bt.jpg" title="Galleria fotografica" alt="Torino" />
                <img src="./immagini/slide/tuvalu.jpg" title="About us, contatti, servizi, partners" alt="Torino" />
                <img src="./immagini/slide/parco_bt.jpg" title="Eventi" alt="Torino" />
        <div id="menu_m">
                <ul>
                    <li><a href="zona1.html">Zona 1</a></li>
                    <li><a href="zona1.html">Zona 2</a></li>
                    <li><a href="zona1.html">Zona 3</a></li>
                    <li><a href="zona1.html">Zona 4</a></li>
                    <li><a href="zona1.html">Zona 5</a></li>
                    <li><a href="zona1.html">Zona 6</a></li>
                    <li><a href="zona1.html">Zona 7</a></li>
                    <li><a href="zona1.html">Zona 8</a></li>
                    <li><a href="zona1.html">Zona 9</a></li>
                    <li><a href="zona1.html">Zona 10</a></li>
                    <li><a href="zona1.html">Zona 11</a></li>
                    <li><a href="zona1.html">Zona 12</a></li>
                </ul>
        </div>
        </div></div>
        <div id="social">COLLEGAMENTI SOCIAL: collegamenti ai vari social</div>
        <div id="footer">FOOTER: note varie ed eventuali</div>
        </div>
        </body>
    </html>
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  3. #3
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    style2col.css

    codice:
    * {    margin: 0;
        padding: 0;
        }
    div {
        vertical-align: top;
        }
    #telaio {
        display:block;
        width: 100%;
        height: 100%;
        background-color: #000;
        }
    #banner {
        width: 100%;
        display: block;
        }
    #logo {
        display: inline-block;
        width: 20%;
        background-color: red;
        }
    #logo img, #banner img, #skin img, #slide img {
        display: block;
        width: 100%;
        background-color: red;
        }
    #slide img {          
        border-radius: 20px;
        border: 1px solid #000;
        box-shadow: 5px 5px 10px 2px #333333;
        -webkit-box-shadow: 5px 5px 10px 2px #333333;
        -moz-box-shadow: 5px 5px 10px 2px #333333;
        }
    #menu_ph img {
        width: 500px;
        max-width: 90%;
        margin: 10px;
        border-radius: 20px;
        border: 1px solid #000;
        box-shadow: 5px 5px 10px 2px #333333;
        -webkit-box-shadow: 5px 5px 10px 2px #333333;
        -moz-box-shadow: 5px 5px 10px 2px #333333;
        }
    #menu_s {
        display: inline-block;
        width: 80%;
        background-color: cyan;
        }
    #menu_ph {
        width:100%;
        text-align: center;
        }
    #skin {
        width: 100%;
        }
    #telaio2 {
        display: block;
        width: 100%;
        background-color: #fff;
        }
    #content {
        width: 100%;
        text-align: center;
        }
    #testo {
        display: inline-block;
        width: 500px;
        max-width: 90%;
        padding: 20px;
        }
    #slide {
        display: inline-block;
        width: 500px;
        max-width: 90%;
        padding: 20px;
        text-align: center;
        overflow: hidden;
        }
    #video {
        width: 480px;
        max-width: 90%;
        margin-top: 40px;
        text-align: center;
        }
    #menu_m {
        width: 100%;
        margin-top: 10px;
        text-align: center;
        }
    #menu_m ul {
        list-style: none;
        padding: 20px;
        }
    #menu_m li {
        min-width: 100px;
        min-height: 20px;
        margin: 5px;
        }
    #menu_m a {
        text-decoration: none;
        color: #808080;
        font-size: 1.1em;
        line-height: 1.5em;
        }
    #menu_m a:hover {
        text-decoration: none;
        color: #800517;
        font-size: 1.5em;
        line-height: 1.5em;
        }
    #social {
        display: block;
        background-color: gray;
        }
    #footer {
        background-color: orange;
        }
    #testo h1, #testo h2, #testo p  {
        margin: 5px;
        }
    #testo p {
        text-align: justify;
        }
    slideshow.js

    codice:
    $ 
        function () {
            $( "#slide" ).imageFading({caption: true});    /* cambiare slide con il nome del div*/
        }
    );
    jquery.imageFading.js

    codice:
    /*configuration:
        $( "#div" ).imageFading( {options} )
        
    options:    showtime (milliseconds) - image showing time - default 3000 (3 seconds)
            loading (string) - text on preloading images
            fadetime (milliseconds) - fading time - default 3000 (3 seconds)
            caption (boolean) - show caption - default false
            captioncss (object) - css for caption
            - height, color, font, background, marginTop, opacity, padding, align
            default: captioncss: { height: 20, color: '#fff', font: '10px Helvetica', marginTop: *dynamic at botom*, background: '#000', opacity: 0.7, padding: 5, align: 'left' }
            over: (boolean) - activate event on mouse over - default true                            
    */
    
    
    ( function( $ ) {
        $.fn.imageFading = function ( options ) {
            return this.each( function() {
                var $this = $( this );
                var over = false;
                
                // set parameters
                var opt = $.extend( 
                    { 
                          showtime: 3000
                        , loading: "Caricamento immagini..." 
                        , fadetime: 3000
                        , caption: false
                        , captioncss: {}
                        , over: true
                    }
                    , options || {}
                );
                
                // mouse over event
                if ( opt.over ) {
                    $this.hover(
                          function () { over = true; }
                        , function () { over = false; }
                    );
                }
                
                // set container css
                if ( $this.css( "overflow" ) != "hidden" ) {
                    $this.css({ "overflow": "hidden" });
                }
                
                // hide all images
                $this.children().css({
                    position: "absolute"
                    , "z-index": "1"
                    , "margin-top": "0px"
                    , "margin-left": "0px"
                    , "max-height": $this.height() + "px"
                    , "max-width": $this.width() + "px"
                }).hide();
                
                // print loading
                $this.append(
                    "<div style='clear:both; padding: 0px; margin: 0px;' id='loading'>" + opt.loading + "</div>"
                );
                
                // preload images
                var loadImgs = 0;
                $( "img" , $this ).each(
                    function () {
                        var img = new Image();
                        var soc = $( this ).attr( 'src' );
                        
                        $( img ).load(
                            function () {
                                loadImgs++;
                            }
                        ).attr( "src" , soc );
                    }
                );
                
                var ie7 = navigator.userAgent.match(/MSIE 7/i);
                
                var totImgs = $( "img" , $this ).length;
                var intVal = window.setInterval(
                    function () {
                        if ( loadImgs == totImgs ) {
                            window.clearInterval( intVal );
                            $( "#loading" ).remove();
                            
                            if ( opt.caption ) {
                                $this.append( "<div id='caption'></div>" );
                                var ht = parseInt ( opt.captioncss.height || 20 );
                                var pg = parseInt ( opt.captioncss.padding || 5 );
                                
                                $( "#caption" ).css({
                                      "position":     ( ie7 ? "relative" : "absolute" )
                                    , "z-index":     parseInt ( $this.css( "z-index" ) ) + 5 || 10
                                    , "width":         ( $this.width() - ( pg * 2 ) ) + "px"
                                    , "height":     ( opt.captioncss.height || ( ht - ( pg * 2 ) ) ) + "px"
                                    , "color":         opt.captioncss.color || "#fff"
                                    , "font":         opt.captioncss.font || "40px Helvetica"
                                    , "background": opt.captioncss.background || "#000"
                                    , "margin-top": ( opt.captioncss.marginTop || ( $this.height() - ht ) ) + "px"
                                    , "padding":     pg + "px"
                                    , "opacity":     opt.captioncss.opacity || 0.7
                                    , "text-align": opt.captioncss.align || "center"
                                    , "display":     "none"
                                });
                            }
                            
                            $this.children( ":eq(0)" )
                                .css({
                                    "margin-top": ( ( $this.height() - $this.children( ":eq(0)" ).height() ) / 2 ) + "px"
                                    , "margin-left": ( ( $this.width() - $this.children( ":eq(0)" ).width() ) / 2 ) + "px"
                                })
                                .fadeIn( parseInt ( opt.fadetime ) );
                            $( "#caption" ).html( $this.children( ":eq(0)" ).attr( "title" ) ).fadeIn( parseInt ( opt.fadetime ) );
                            
                            if ( totImgs > 1 ) { fadeStart( $this , opt , totImgs ); }
                        }
                    }
                    , 100
                );
                
                function fadeStart ( $this , opt , totImgs ) {
                    var cnt = 0;
                    var intVal = window.setInterval(
                        function () {
                            if ( ! over ) {
                                $( $this ).children( ":eq(" + cnt + ")" ).fadeOut( parseInt ( opt.fadetime ) );
                                setTimeout( function () { $( "#caption" ).html( "" ) } , parseInt ( opt.fadetime / 4 ) );
                                
                                if ( ( cnt + 1 ) == totImgs ) {
                                    cnt = 0;
                                } else {
                                    cnt++;
                                }
                                
                                $( $this ).children( ":eq(" + cnt + ")" )
                                    .css({
                                        "margin-top": ( ( $this.height() - $this.children( ":eq(" + cnt + ")" ).height() ) / 2 ) + "px"
                                        , "margin-left": ( ( $this.width() - $this.children( ":eq(" + cnt + ")" ).width() ) / 2 ) + "px"
                                    })
                                    .fadeIn(
                                          parseInt ( opt.fadetime )
                                        , function () {
                                            if ( opt.caption ) {
                                                $( "#caption" ).html( $this.children( ":eq(" + cnt + ")" ).attr( "title" ) );
                                            }
                                        }
                                    );
                            }
                        }
                        , parseInt ( opt.showtime ) + parseInt ( opt.fadetime )
                    );
                }
            });
        };
    })(jQuery);
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  4. #4
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    Qualcuno mi può aiutare?
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,011
    Quote Originariamente inviata da flydrose Visualizza il messaggio
    Ciao a tutti, ho letto la guida, ma non riesco a capire il funzionamento dei js, lo trovo ancora troppo complicato, e per capirlo meglio dovrei avere un pò più di esempi visivi forse. Anche se nel mio sito sto pensando di inserire un accordion ed uno slideshow con fading effect, che trovai una decina di anni fa circa in rete, carino, semplice nella presentazione, ma che non riesco a far funzionare nel modo che vorrei,
    Uno script jquery di 10 anni fa potrebbe non essere più supportato dalle versioni recenti della libreria jquery
    nel senso:

    - Ho capito come personalizzare alcuni aspetti come i caratteri delle didascalie, il tempo di scorrimento per ciascuna foto, e cose così, ma non come settare il posizionamento del riquadro delle immagini;

    - Prima di inserire lo script dello slideshow, c'era un div inline con quello del testo, con una singola immagine, con sotto un altro div contenente un menu, dopo lo script il menu è sparito, coperto presumo dalle immagini dello slide che però sono nascoste.

    L'accordion lo vorrei usare nel div testo per sfogliare i vari capitoli, un pò alla wikipedia quando con il click apre il capitolo o le sezioni... ma anche lì avrei bisogno di qualcuno che mi spieghi cosa e come settare per una personalizzazione minima.
    Consigli, pareri, critiche e complimenti sono ben accetti

    Allego codici HTML, CSS e JS, in quanto la pagina ancora non è stata caricata.
    Usa uno spazio web free (tipo altervista) per replicare la pagina e posta qui il link, replicare in locale oltre che complicato potrebbe non dare lo stesso problema che riscontri tu.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Uno script jquery di 10 anni fa potrebbe non essere più supportato dalle versioni recenti della libreria jquery

    Usa uno spazio web free (tipo altervista) per replicare la pagina e posta qui il link, replicare in locale oltre che complicato potrebbe non dare lo stesso problema che riscontri tu.
    Ciao, scusa la risposta tardiva ma ultimamente sono stato un pò preso dal lavoro.
    Hai ragione, potrebbe magari essere un js troppo vecchio, ma nella vecchia pagina in cui lo usai si visualizza ancora bene, ma lo avevo personalizzato per quella pagina, in questa la visualizzazione fa defecare, o meglio, non è soddisfacente in quanto da riprogrammare e non mi ricordo più come farlo funzionare.
    Mi sono registrato su uno spazio free, domani carico il tutto e posterò il link, ora gna fo proprio, sono appena tornato da lavoro e sto dormendo in piedi
    Grazie per la tua risposta
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  7. #7
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Usa uno spazio web free (tipo altervista) per replicare la pagina e posta qui il link, replicare in locale oltre che complicato potrebbe non dare lo stesso problema che riscontri tu.
    Ecco il link http://www.flydrose.epizy.com/indexslide.html
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  8. #8
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,011
    Non casco quale il problema hai due slide, prima inserisci nella pagina lo script per le slide una volta posizionato (lavorando sui css) e funzionante, proseguiamo con l’accordion
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  9. #9
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Non casco quale il problema hai due slide
    Praticamente gli slide sono fuori posto, il primo dovrebbe figurare tra le due immagini (
    codice:
    <img src="immagini/torino_skyline2.jpg" title="Guida" alt="Guida" />
    e
    codice:
    <img src="immagini/torino_skyline2bn.jpg" title="Torino" alt="Torino" />
    ), tra il div banner e il div skin, e invece va a cavallo del secondo, mentre il secondo slide va a sovrapporsi al testo. Eppure nel css mi sembra di aver dato i posizionamenti giusti. Infatti se tolgo gli slide e le metto solo come semplici immagini ogni cosa è al suo posto.
    prima inserisci nella pagina lo script per le slide
    Scusami non ho capito, non ho già inserito lo script? O mi sono perso un pezzo di codice?
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

  10. #10
    Utente di HTML.it L'avatar di flydrose
    Registrato dal
    Oct 2019
    residenza
    Torino
    Messaggi
    25
    Quello sarebbe comunque un link di prova, il tutto poi dovrò applicarlo sulla pagina vera e propria che trovi in /index.html dove tra l'altro sto valutando se inserire gli slide sotto ogni capitolo, o solo a piè pagina o sotto il menù laterale.
    Anche in questo caso sono ben accetti consigli e pareri
    Spero di non disturbare troppo....
    Meglio tentare e fallire che non tentare affatto
    You can check out anytime you like, but you can never leave...

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.