personalizzazione slideshow

Fabio90

Utente Attivo
29 Feb 2012
507
0
16
Buonasera Forum,
Vorrei implementare questa slide in modo tale che al click del thunbnail compaia sulla destra lo slideshow di tutte le immagini appartenenti a quel thunbnail. Quindi quest'ultimo sarebbe la copertina dell'album che vorrei si visualizzasse in slide.

HTML:
<html>
<head>
<title>ShineTime at AddyOsmani.com</title>

<link rel="stylesheet" type="text/css" href="styles.css"></link>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="fonts/aura_400.font.js"></script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]--> 
</head>

<script type="text/javascript">
  $(document).ready(function()
  {
   
	 /*Your ShineTime Welcome Image*/
	 var default_image = 'images/large/default.jpg';
	 var default_caption = 'Welcome to ShineTime';
	 
	 /*Load The Default Image*/
	 loadPhoto(default_image, default_caption);
	 
	 
	 function loadPhoto($url, $caption)
	 {
	 
	 
	    /*Image pre-loader*/
	    showPreloader();
	    var img = new Image();
	    jQuery(img).load( function() 
		{
			jQuery(img).hide();
			hidePreloader();
		
        }).attr({ "src": $url });
	
	    $('#largephoto').css('background-image','url("' + $url + '")');
		$('#largephoto').data('caption', $caption);
	 }

	 
	 /* When a thumbnail is clicked*/
	 $('.thumb_container').click(function()
	 {
	     
		  var handler = $(this).find('.large_image');
		  var newsrc  = handler.attr('src');
		  var newcaption  = handler.attr('rel');
		  loadPhoto(newsrc, newcaption);
	 
	 });
	 
	 
	 
	 
     /* When a thumbnail is hovered over*/
	 $('.thumb_container').hover(function()
	 {  
         $(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
		 $(this).find(".large_thumb_shine").stop();
         $(this).find(".large_thumb_shine").css("background-position","-99px 0"); 
         $(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
			 
	 }, function()
	 {
	    $(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
	 });
	 
	 function showPreloader()
	 {
	   $('#loader').css('background-image','url("images/interface/loader.gif")');
	 }
	 
	 function hidePreloader()
	 {
	   $('#loader').css('background-image','url("")');
	 }
   
  });
</script>

<div id="container">
<div id="containertitle">
</div>
   <div class="mainframe">
      <div id="largephoto">
	  <div id="loader"></div>
	  
	  
	    <div id="largecaption">
		 <div class="captionShine"></div>
		   <div class="captionContent"></div>
		  
		</div>
		
       <div id="largetrans">  
      </div>
	        
      </div>
      
   </div>
   <div class="thumbnails">
   <br><br><br>
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container"> 
                            <div class="large_thumb"> 
                        		<img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb" />
                                <img src="images/large/sample1.jpg" class="large_image" rel="Just because I can't code, doesn't mean I can't kick your ass!" />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
						</div>
                       </div>
                       
       <!--end entry-->          
       
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container"> 
                            <div class="large_thumb"> 
                        		<img src="images/thumbnails/sample2.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="images/large/sample2.jpg" class="large_image" rel="Kick-Ass Is In Theatres Everywhere Now" />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
						</div>
                       </div>
       <!--end entry-->          
       
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container"> 
                            <div class="large_thumb"> 
                        		<img src="images/thumbnails/sample3.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="images/large/sample3.jpg" class="large_image" rel="I can't see through walls, but I can still kick your ass." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
						</div>
                       </div>
       <!--end entry-->           
       
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container"> 
                            <div class="large_thumb"> 
                        		<img src="images/thumbnails/sample4.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="images/large/sample4.jpg" class="large_image" rel="I won't bite, I promise!" />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
						</div>
                       </div>
       <!--end entry-->           
       
   <!-- start entry-->
                    <div class="thumbnailimage">
                        <div class="thumb_container"> 
                            <div class="large_thumb"> 
                        		<img src="images/thumbnails/sample5.jpg" class="large_thumb_image" alt="thumb" /> 
                                <img src="images/large/sample5.jpg" class="large_image" rel="Using swords to open up that ketchup bottle may not have been the best idea.." />
                                <div class="large_thumb_border"></div>
                                <div class="large_thumb_shine"></div>
                              </div>
						</div>
                       </div>
       <!--end entry-->          
       
   <!-- start entry-->
                   
	   
	      
   </div>
</div>


</html>

HTML:
#container .mainframe { margin-left:100px; width: 500px; height:498px; float:left}
.thumbnailimage {  padding:7px;}
.large_thumb	{ position: relative; width:64px; height:64px; padding:0px 10px 0px 0;}
img.large_thumb_image	{position:absolute; left:5px; top:4px;}
.large_thumb_border	{width:64px; height:64px; background:url('images/interface/thumb_border.png'); position:absolute; }
.large_thumb_shine	{width:54px; height:54px; background:url('images/interface/shine.png'); position:absolute; background-position:-150px 0; left:5px; top:4px; background-repeat:no-repeat;}
.thumb_container { width:64px; height:64px; background-image:url('images/interface/thumb_holder.png'); }
#largephoto { width: 444px; height:370px; background-color:#333333; margin-top:68px; margin-left:40px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-left: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
#largetrans { width: 444px; height:370px; background-image:url('images/interface/main_bg_trans.png'); -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.large_image { display:none}
#containertitle { position:absolute; margin-top:35px; margin-left:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-shadow: 0px 1px 2px #fff;}
#largecaption {  text-align:center; height:100px; width:100%; background-color:#111; position:absolute; width: 444px; margin-top:270px; -moz-border-radius-bottomleft: 10px;  -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; display:none; color:#fff; font-size:30px; font-family:Arial; letter-spacing:-1px; font-weight:bold}
#largecaption .captionContent { padding:5px;}
#largecaption .captionShine { background:url('images/interface/bigshine.png'); position:absolute;  width: 444px; height: 100px; background-position:-150px 0;background-repeat:no-repeat;}
#loader { width:150px; height:150px;background-image:url('images/interface/loader.gif'); background-repeat:no-repeat; position:absolute;}

Sperando di esser stato chiaro confido nel vostro aiuto e vi auguro buone feste :D
 
Discussioni simili
Autore Titolo Forum Risposte Data
Z fckeditor personalizzazione Webdesign e Grafica 0
L [WordPress] personalizzazione commenti WordPress 0
booklisa Errori wordpress personalizzazione tema post aggiornamento 4.7 CMS (Content Management System) 0
Benix89 Personalizzazione HomePage Magento 1
Frank10 [Retribuito] Personalizzazione tema Prestashop Offerte e Richieste di Lavoro e/o Collaborazione 2
S Script per personalizzazione Javascript 6
S Personalizzazione CSS PHP 9
J casella di ricerca e personalizzazione HTML e CSS 2
G personalizzazione script PHP 2
N Upload Immagini Sito Personalizzazione Gadget PHP 11
J Personalizzazione Template Flash Offerte e Richieste di Lavoro e/o Collaborazione 0
S Personalizzazione forum php. PHP 1
B wordpress: consigli plugin personalizzazione utenti WordPress 2
L Personalizzazione esplicita PHP 2
Nik Personalizzazione scrollbar HTML e CSS 1
P Variazione e personalizzazione dei mime Hosting 2
N Personalizzazione Logo...AIUTOOO! Webdesign e Grafica 3
Z Slideshow automatico HTML e CSS 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
F [PHP] Slideshow video PHP 0
Cosina Aggiungere pulsante pause/play a slideshow Javascript 0
ANDREA20 [Javascript] Slideshow Gallery Javascript 0
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
I [CSS3]Problema slideshow multiple HTML e CSS 2
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
V Creare slideshow con immagini esterne Ajax 1
dakko96 slideshow doppia jQuery 0
G Aiuto slideshow joomla3x Joomla 4
R Slideshow di immagini in HTML5 HTML e CSS 1
S Slideshow con jquery Javascript 2
S Slideshow immagini automatica senza specificare il file immagine PHP 7
I Slideshow HTML e CSS 4
L SlideShow in js Javascript 1
A problema slideshow con visualizzazione mobile HTML e CSS 6
F Plugin Metaslider (Slideshow Wordpress) WordPress 1
C slideshow numero immagini Javascript 5
Devil-94 javascript slideshow Javascript 1
D Come far ripartire una gif quando si rivisita la pagina dello slideshow WordPress 1
Emix Slideshow con div sovrapposto HTML e CSS 5
J Slideshow e gallerie manuali HTML e CSS 19
G Slideshow e Posizionamento DIV HTML e CSS 8
F Codice Random Javascript con slideshow Javascript 3
S Problemi con slideshow HTML e CSS 0
M Simple Slideshow jQuery 1
R Errore Slideshow - "Attenzione lo script non risponde" Joomla 1
R Uso Immagini per Slideshow Joomla 0
R Immagini con Link (modulo e slideshow) Joomla 0
C aggiungere link foto slideshow HTML e CSS 2

Discussioni simili