Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    [jquery] slideshow automatico

    Salve, chiedo aiuto a voi come ultima spiaggia, visto i miei vani tentativi anche cercando informazioni ed esempi in rete.

    Un'amica mi ha chiesto di modificare il suo sito web, e fin qui nessun problema. Ma poi sono incappata in uno slideshow in jquery.

    Ora, lo slide è impostato per cambiare foto al click dei vari pulsanti "avanti" e "dietro" solo che lei vorrebbe che fosse anche automatico con un effetto fade, ho provato a modificare lo script in tutti i modi ma niente non funziona... anche perchè non sono una grande esperta di javascript.

    Se vi posto lo script potete darmi una mano?

    questo è il javascript che gestisce sia lo slide che il menu:

    codice:
    function initPhotos(){
        $('#photo-toggle a').unbind('click').parent().fadeOut('fast', function(){
            $('#photo-wrapper').animate({
                height: '540px'
            }, 500, 'swing', function() {
                $('p#photo-close').fadeIn('fast', function(){
                    $('#photo-controls ul').fadeIn('fast');
                    $('p#photo-close a').click(function(){
                        destroyPhotos();
                        return false;
                    });
                });
            });
        });
    }
    
    function destroyPhotos(){
        $('#photo-controls ul').fadeOut('fast');
        $('p#photo-close a').unbind('click').parent().fadeOut('fast', function(){
            $('#photo-wrapper').animate({
                height: '80px'
            }, 500, 'swing', function() {
                $('#photo-toggle').fadeIn('fast', function(){
                    $('#photo-toggle a').click(function() {
                        initPhotos();
                        return false;
                    });
                });
            }); 
        });
    }
    
    
    (function($){
    
        $(document).ready(function(){
    
            // auto clear text inputs on focus
            $('input[type="text"]').each(function(){
                $(this).data('original_copy', $(this).val());
                
            });
    
            $('input[type="text"]').focus(function(){
                if($(this).val()==$(this).data('original_copy')){
                    $(this).val('');
                }
            }).blur(function(){
                if($(this).val().length<1){
                    $(this).val($(this).data('original_copy'));
                }
            });
    
    
            if(!$('html').hasClass('mobile'))
            {
                // nav
        		$('header nav ul li a').each(function(){
        			$(this).html($(this).text()+'<span>' + $(this).text() + '</span>');
        		});
        
        		$('header nav ul li:not(.current-page) a span').hide();
        
                $('header nav ul li a').hover(
                    function(){
                        link = $(this);
                        $(this).find('span').fadeIn('fast');
                    },
                    function(){
                        $(this).find('span').fadeOut('fast');
                    }
                );
            }
    
            // if we're not on the home page, we have work to do
            if(!$('body').hasClass('home'))
            {
                // prep all of our controls
                $('#linkhome').after('<div id="photo-controls"><p id="photo-toggle">Photos</p><ul class="group"><li id="photo-prev">Prev<li id="photo-next">Next[/list]</div>');
                $('#photo-holder').after('<p id="photo-close">Close</p>');
    
                // hide all of our controls
                $('#photo-nav').hide();
                $('#photo-controls ul').hide();
                $('#photo-close').hide();
    
                // hook the trigger
                $('#photo-toggle a').click(function() {
                    initPhotos();
                    return false;
                });
    
            }else{
                $('header nav').before('<div id="photo-controls"><ul class="group"><li id="photo-prev">Prev<li id="photo-next">Next[/list]</div>');
            }
    
            // hook the photo nav
            $('#photo-controls li#photo-prev a').live('click', function(){
                $('ul#photo-holder li:eq(0)').fadeOut()
                     .parent().find('li:last-child').fadeIn()
                     .prependTo('ul#photo-holder');
                return false;
            });
    
            $('#photo-controls li#photo-next a').live('click', function(){
                $('ul#photo-holder li:eq(0)').fadeOut()
                     .next('li').fadeIn()
                     .end().appendTo('ul#photo-holder');
                return false;
            });
    
    
            // Cufon
            Cufon.replace('#copy h1,#secondary h2,footer h4,footer label,a.button,button,.subheading h2 span,section.menu-group h2,ul#thumbs-team li h3,#employee-profile .bio h2,header nav ul li a,header nav ul li a span');
            Cufon.replace('.alttype', { hover: true } );
            //Cufon.replace('.menu-brief .entry .thumbnail a span.alttype', { hover: true } );
    
    
            Shadowbox.init();
    
    
            $('.ie6 nav').width(475);
    
            // we need to circumvent mobile browsers wanting to show hover states on tap
            if($('html').is('.mobile, .ipod, .iphone, .mobile, .ipad')){
                $('.menu-brief a').live('touchend', function(e) {
    			    var el = $(this);
    			    var link = el.attr('href');
    			    window.location = link;
    			});
            }
    
    		
    
    		if(!$('html').hasClass('ie')){
    	        $('#social li, .icons li, a.read-more img, li.read-full, li.share-this, #photo-toggle a').fadeTo(1,0.60).hover(function(){
    	            $(this).fadeTo(150,0.99);
    	        },function(){
    	            $(this).fadeTo(150,0.60);
           		 });
    		}
    		
    		if(!$('html').is('.mobile, .ie'))
            {		
    			$('.menu-brief.view').not('.active').fadeTo('slow', 0.5);		
    			$('.menu-brief.view').not('.active').hover(  
    	            function () {  
    	                $(this).fadeTo('fast', 1.0);  
    	            },   
    	            function () {  
    	                $(this).fadeTo('fast', 0.5);           
    	        });
    		}
    
        });
        
        	
    
    })(this.jQuery);
    qui nella paggina html

    codice:
    <div id="photo-wrapper">
                <ul id="photo-holder">[*][img]<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/headers/1.jpg[/img][*][img]<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/headers/2.jpg[/img][*][img]<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/headers/3.jpg[/img][/list]
    
            <script>
              jQuery('#photo-holder li:gt(0)').hide();
            </script>
    Grazie mille a tutti in anticipo...

  2. #2
    CIAO!
    Ma quello che hai postato è il codice originale o è quello già modificato da te?
    e poi se riesci posta pure l'html, non dico completo ma almeno con l'header, magari basta attivare il player dal codice del plug-in...
    E comunque, invece di impazzire, hai preso in considerazione di cambiare slide show? eccotene uno che può fare al caso tuo:
    /1/]PrettyPhoto
    oppure: FullScreen
    Oppure qui ne trovi un po':
    JuliusDesign

    Ciao ciaooo

  3. #3
    Intanto grazie mille per il tuo aiuto.

    Ho provato a convincerla a cambiare slideshow ma le piace quello, poi ho anche provato, ma il sito essendo gestito da joomla mi tira fuori una marea di errori di incompatibilità con gli altri elementi.

    Questo essendo già funzionante ho pensato che sarebbe più facile aggiungerli il fade-in/out automatico oltre ai classici pulsanti.

    questo è quello che c'è nella pagina html (spero che sia quello che ti interessa):

    codice:
    <?php  
     // no direct access 
     defined( '_JEXEC' ) or die( 'Restricted access' );?>
    <head>
    <jdoc:include type="head" /> 
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/style.css">
      <!--[if lt IE 9]>
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    	<![endif]-->
    
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
      <script>!window.jQuery && document.write(unescape('%3Cscript src="/js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
    <script src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/js/script.js"></script> <-----QUESTO E' IL JS CHE HO POSTATO PRIMA
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
    </head>
    <body class="home">
    <div id="container">
            <div id="photo-wrapper">
                <ul id="photo-holder">
    	[*][img]<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/headers/0.jpg[/img]
                 	[*][img]<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/headers/1.jpg[/img][*][img]<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/headers/2.jpg[/img][*][img]<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/headers/3.jpg[/img][/list]
    
    <script>
    jQuery('#photo-holder li:gt(0)').hide();
    </script>

    Grazie ancora

  4. #4
    Quello che hai postato suppongo sia l'index.php del tuo template di joomla.
    Io te lo dico, odio profondamente i CMS, ma ormai sembra che non se ne possa fare a meno! Bah... Vecchi nostalgismi... ahahah
    Stasera lo guardo ben bene e domani ti dico.
    Spero che non sia una questione di vita o di morte averlo stasera!
    Ciao ciao

  5. #5
    Originariamente inviato da ciro1919
    Quello che hai postato suppongo sia l'index.php del tuo template di joomla.
    Io te lo dico, odio profondamente i CMS, ma ormai sembra che non se ne possa fare a meno! Bah... Vecchi nostalgismi... ahahah
    Stasera lo guardo ben bene e domani ti dico.
    Spero che non sia una questione di vita o di morte averlo stasera!
    Ciao ciao
    No no figurati, anzi grazie per l'interessamento

    PS: si è la pagina index.php del template

  6. #6
    Giuro che non ti ho abbandonata! ahah
    Ma sto cercando di capire il codice perchè senza vederlo in azione mi risulta difficile... Non riesci a darmi il link del sito della tua amica? anche in MP, così sarebbe più easy.
    Grazie ciao ciao

  7. #7
    Eccolo! Stavi perdendo la speranza vero?!
    hahahah comunque scusa ma tra lavoro e 1000 altre cose l'ho preso in mano ora e devo dire che non era tutta sta complicatezza...
    COMUNQUE!
    Sostituisci nell'index questo
    codice:
    <script>jQuery('#photo-holder li:gt(0)').hide();</script>
    con questo, dove time è la variabile per il tempo, che serve per dire di cambiare immagine ogni tot tempo.
    codice:
    <script>
    jQuery('#photo-holder li:gt(0)').hide();</script>
    var time=3000; //variabile per il tempo è in millisecondi cioè 1 secondo = 1000
      $(function(){
        setInterval(function(){
    		 $('ul#photo-holder li:eq(0)').fadeOut()
                     .next('li').fadeIn()
                     .end().appendTo('ul#photo-holder');
                return false;
    		}, time);
    });
    </script>
    E tutto dovrebbe girare a meraviglia!


    Fammi sapere!
    Credo nelle idee che diventano azioni. [E. Pound]
    Le cose perdonabili sono, in verità, pochissime. [Y. Mishima]

  8. #8
    Originariamente inviato da ciro1919
    Eccolo! Stavi perdendo la speranza vero?!
    hahahah comunque scusa ma tra lavoro e 1000 altre cose l'ho preso in mano ora e devo dire che non era tutta sta complicatezza...
    COMUNQUE!
    Sostituisci nell'index questo
    codice:
    <script>jQuery('#photo-holder li:gt(0)').hide();</script>
    con questo, dove time è la variabile per il tempo, che serve per dire di cambiare immagine ogni tot tempo.
    codice:
    <script>
    jQuery('#photo-holder li:gt(0)').hide();</script>
    var time=3000; //variabile per il tempo è in millisecondi cioè 1 secondo = 1000
      $(function(){
        setInterval(function(){
    		 $('ul#photo-holder li:eq(0)').fadeOut()
                     .next('li').fadeIn()
                     .end().appendTo('ul#photo-holder');
                return false;
    		}, time);
    });
    </script>
    E tutto dovrebbe girare a meraviglia!


    Fammi sapere!

    O mio dio sei il mio Eroeee

    funziona tutto perfettamente, grazie mille per il tuo aiuto e la tua competenza sei stato gentilissimo.


  9. #9
    Ottimo sono contento che ti vada bene!
    Credo nelle idee che diventano azioni. [E. Pound]
    Le cose perdonabili sono, in verità, pochissime. [Y. Mishima]

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 © 2026 vBulletin Solutions, Inc. All rights reserved.