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

    [jQuery]Slide di immagini

    Salve,
    ho trovato, per la rete, uno slide di immagini molto semplice.
    Qualcuno sarebbe così gentile da indicarmi come aggiungere del testo oltre alle immagini?

    Mi spiego, vorrei che sopra ad ogni immagine comparisse una scritta, un titolo, che funga anche da link (ecco un esempio)

    Il codice che ho trovato è il seguente ed è preso da questo sito:
    codice:
    jQuery(function($){
    	//Show the paging and activate its first link
    	$(".paging").show();
    	$(".paging a:first").addClass("active");
    	
    	//Get size of the image, how many images there are, then determin the size of the image reel.
    	var imageWidth = $(".window").width();
    	var imageSum = $(".image_reel img").size();
    	var imageReelWidth = imageWidth * imageSum;
    	
    	//Adjust the image reel to its new size
    	$(".image_reel").css({\'width\' : imageReelWidth});
    	
    	//Paging  and Slider Function
    	rotate = function(){
    	    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    	    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
    	
    	    $(".paging a").removeClass(\'active\'); //Remove all active class
    	    $active.addClass(\'active\'); //Add active class (the $active is declared in the rotateSwitch function)
    	
    	    //Slider Animation
    	    $(".image_reel").animate({
    	        left: -image_reelPosition
    	    }, 500 );
    	
    	}; 
    
    	//Rotation  and Timing Event
    	rotateSwitch = function(){
    	    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
    	        $active = $(\'.paging a.active\').next(); //Move to the next paging
    	        if ( $active.length === 0) { //If paging reaches the end...
    	            $active = $(\'.paging a:first\'); //go back to first
    	        }
    	        rotate(); //Trigger the paging and slider function
    	    }, 7000); //Timer speed in milliseconds (7 seconds)
    	};
    	
    	rotateSwitch(); //Run function on launch
    	//On Hover
    	$(".image_reel a").hover(function() {
    	    clearInterval(play); //Stop the rotation
    	}, function() {
    	    rotateSwitch(); //Resume rotation timer
    	});	
    	
    	//On Click
    	$(".paging a").click(function() {
    	    $active = $(this); //Activate the clicked paging
    	    //Reset Timer
    	    clearInterval(play); //Stop the rotation
    	    rotate(); //Trigger rotation immediately
    	    rotateSwitch(); // Resume rotation timer
    	    return false; //Prevent browser jump to link anchor
    	});
    });
    Questa è la parte contenente le immagini
    codice:
    <div class="main_view">
        <div class="window">
           <div class="image_reel">
               [img]images/pic1.jpg[/img]
    	   [img]images/pic2.jpg[/img]
    	   [img]images/pic3.jpg[/img]
    	   [img]images/pic4.jpg[/img]
           </div>
        </div>
        <div class="paging">
            1
            2
            3
            4
        </div>
    </div>
    Grazie
    La rovina del mondo sara' l'indifferenza. Ma chi se ne frega!!

  2. #2
    Nessuno saprebbe aiutarmi? Ho visto che molti script, come lightbox o fancybox (per mostrare immagini in pop-up), utilizzano il parametro title o alt e riescono a mostrarlo come testo.. come fanno?
    La rovina del mondo sara' l'indifferenza. Ma chi se ne frega!!

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