2 Gallery scorrevoli stessa pagina

**Lorenzomea** · 23-05-2011, 13:01

Ciao a tutti, sto realizzando una pagina web dove all'interno ci sono due gallery scorrevoli con frecce, cercando sul web ho trovato stepcarousel che mi permette di fare la gallery come serve a me. Il mio problema è che non riesco a fare entrambe le gallery me ne funziona soltanto una, qualcuno sa dirmi come modificare il codice per farle funzionare entrambe??

codice:


	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"   src="js/jquery-1.4.2.min.js"></script>	
	<script type="text/javascript"   src="js/stepcarousel.js">
            /***********************************************
            * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library 
            (www.dynamicdrive.com)
            * Visit http://www.dynamicDrive.com for hundreds of DHTML   scripts
            * This notice must stay intact for legal use
            ***********************************************/
    </script>
    
	


	<script type="text/javascript">

					
						
	stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:true, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['img/frecceSX.gif', -20,75], rightnav: ['img/frecceDX.gif',70, 75]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})					

					

	</script>
    
    
    
    

	<script type="text/javascript">

	stepcarousel1.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:true, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['img/frecceSX.gif', -20,75], rightnav: ['img/frecceDX.gif',70, 75]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})					

					

	</script>
        
    
    
    <style>
	
.stepcarousel { position: relative;
               
                overflow: hidden; 
                width: 784px; height:166px; }
 
.stepcarousel .belt { position: absolute;
                      }
 
.stepcarousel .panel { float: left;
                       overflow: hidden;
                       margin-left: 0px;
					   margin-bottom:30px; /* Margine attorno ai pannelli */
                       width: 166px; /* Larghezza di ogni pannello,            */
                                     /* se rimosso ogni larghezza viene        */
                                     /* adattata automaticamente al contenuto. */
                     }
#mygallery{
			width:784px;
			left:70px;
}					 
					 
					 

					 
	</style>				 


	
	
</head>

<body>

<div class="contenitoreHP">

			<div class="ritornohome" >
			[img]img/RitornoHome.gif[/img]
    		</div>
    
    
<div class="boxcornice">
    
    		[img]img/completed.gif[/img]
            
     
            
                        <div id="mygallery" class="stepcarousel">
 
  <div class="belt">
    <div class="panel">[img]img/F 1A.gif[/img]</div>
    <div class="panel">[img]img/F 2A.gif[/img]</div>
    <div class="panel">[img]img/F 3A.gif[/img]</div>
    <div class="panel">[img]img/F 4A.gif[/img]</div>


  </div>
 
			</div>

            
           	[img]img/projects.gif[/img] 
            
                        <div id="mygallery" class="stepcarousel1">
 
  <div class="belt">
    <div class="panel">[img]img/F 1A.gif[/img]</div>
    <div class="panel">[img]img/F 2A.gif[/img]</div>
    <div class="panel">[img]img/F 3A.gif[/img]</div>
    <div class="panel">[img]img/F 4A.gif[/img]</div>


  </div>
 
            

            
</div>

			<div class="linkCA">
        	[img]img/LinkContatti.gif[/img]
        	[img]img/architectures-linked.gif[/img]
            </div>
            
            	<div align="right">
         		<p style="font-family:Arial, Helvetica, sans-serif; font-size:7pt; color:#666666">P.IVA 0000000000</p>
               	</div>
       
</div>


</body>
</html>

**albx87** · 23-05-2011, 13:09

Se mi permetti ti segnalo un "errore" nel codice html....non so se sia per quello che non va (magari crea conflitto...però boh?!)...comunque...2 elementi con lo stesso id non possono stare nella stessa pagina, mi spiego:

<div id="mygallery" class="stepcarousel">

<div class="belt">
<div class="panel">[img]img/F 1A.gif[/img]</div>
<div class="panel">[img]img/F 2A.gif[/img]</div>
<div class="panel">[img]img/F 3A.gif[/img]</div>
<div class="panel">[img]img/F 4A.gif[/img]</div>

</div>

</div>

[img]img/projects.gif[/img]

<div id="mygallery" class="stepcarousel1">

<div class="belt">
<div class="panel">[img]img/F 1A.gif[/img]</div>
<div class="panel">[img]img/F 2A.gif[/img]</div>
<div class="panel">[img]img/F 3A.gif[/img]</div>
<div class="panel">[img]img/F 4A.gif[/img]</div>

</div>

**Lorenzomea** · 23-05-2011, 13:28

Ciao,
grazie quello era un errore infatti ora le due gallery sono allineate correttamente, però il problema è che la seconda non è come se non mi "vedesse" lo script che mi crea la gallery

ora ho modificato il codice cosi

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alessandro Bassetti-architectures</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"   src="js/jquery-1.4.2.min.js"></script>	
	<script type="text/javascript"   src="js/stepcarousel.js">
            /***********************************************
            * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library 
            (www.dynamicdrive.com)
            * Visit http://www.dynamicDrive.com for hundreds of DHTML   scripts
            * This notice must stay intact for legal use
            ***********************************************/
    </script>
    
	


	<script type="text/javascript">

					
						
	stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:true, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['img/frecceSX.gif', -20,75], rightnav: ['img/frecceDX.gif',70, 75]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})					

					

	</script>
    
    
    
    

	<script type="text/javascript">

	stepcarousel1.setup({
	galleryid: 'mygallery1', //id of carousel DIV
	beltclass: 'belt1', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel1', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:true, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['img/frecceSX1.gif'], rightnav: ['img/frecceDX1.gif']},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})					

					

	</script>
        
    
    
    <style>
	
.stepcarousel { position: relative;
               
                overflow: hidden; 
                width: 784px; height:166px; }
 
.stepcarousel .belt { position: absolute;
                      }
 
.stepcarousel .panel { float: left;
                       overflow: hidden;
                       margin-left: 0px;
					   margin-bottom:30px; /* Margine attorno ai pannelli */
                       width: 166px; /* Larghezza di ogni pannello,            */
                                     /* se rimosso ogni larghezza viene        */
                                     /* adattata automaticamente al contenuto. */
                     }
#mygallery, #mygallery1{
			width:784px;
			left:70px;
}					 
					 
.stepcarousel1 { position: relative;
               
                overflow: hidden; 
                width: 784px; height:166px; }
 
.stepcarousel1 .belt1 { position: absolute;
                      }
 
.stepcarousel1 .panel1 { float: left;
                       overflow: hidden;
                       margin-left: 0px;
					   margin-bottom:30px; /* Margine attorno ai pannelli */
                       width: 166px; /* Larghezza di ogni pannello,            */
                                     /* se rimosso ogni larghezza viene        */
                                     /* adattata automaticamente al contenuto. */	}			 

					 
	</style>				 


	
	
</head>

<body>

<div class="contenitoreHP">

			<div class="ritornohome" >
			[img]img/RitornoHome.gif[/img]
    		</div>
    
    
<div class="boxcornice">
    
    		[img]img/completed.gif[/img]
            
     
            
                        <div id="mygallery" class="stepcarousel">
 
  <div class="belt">
    <div class="panel">[img]img/F 1A.gif[/img]</div>
    <div class="panel">[img]img/F 2A.gif[/img]</div>
    <div class="panel">[img]img/F 3A.gif[/img]</div>
    <div class="panel">[img]img/F 4A.gif[/img]</div>


  </div>
 
			</div>

            
           	[img]img/projects.gif[/img] 
            
                        <div id="mygallery1" class="stepcarousel1">
 
  <div class="bel1t">
    <div class="panel1">[img]img/F 1A.gif[/img]</div>
    <div class="panel1">[img]img/F 2A.gif[/img]</div>
    <div class="panel1">[img]img/F 3A.gif[/img]</div>
    <div class="panel1">[img]img/F 4A.gif[/img]</div>


  </div>
 
            

            
</div>

			<div class="linkCA">
        	[img]img/LinkContatti.gif[/img]
        	[img]img/architectures-linked.gif[/img]
            </div>
            
            	<div align="right">
         		<p style="font-family:Arial, Helvetica, sans-serif; font-size:7pt; color:#666666">P.IVA 0000000000</p>
               	</div>
       
</div>


</body>
</html>

**Lorenzomea** · 23-05-2011, 13:36

Modificando cosi lo script sono riuscito a far apparire le frecce, quindi ora "vede" lo script ma non me lo fa scorrere

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alessandro Bassetti-architectures</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"   src="js/jquery-1.4.2.min.js"></script>	
	<script type="text/javascript"   src="js/stepcarousel.js">
            /***********************************************
            * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library 
            (www.dynamicdrive.com)
            * Visit http://www.dynamicDrive.com for hundreds of DHTML   scripts
            * This notice must stay intact for legal use
            ***********************************************/
    </script>
    
	


	<script type="text/javascript">

					
						
	stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:true, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['img/frecceSX.gif', -20,75], rightnav: ['img/frecceDX.gif',70, 75]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})					

					

	</script>
    
    
    
    

	<script type="text/javascript">

	stepcarousel.setup({
	galleryid: 'mygallery1', //id of carousel DIV
	beltclass: 'belt1', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel1', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:true, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['img/frecceSX1.gif',-20,75], rightnav: ['img/frecceDX1.gif',70,75]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})					

					

	</script>

in pratica ho lasciato lo stesso nome alla funzione e ho cambiato il nome hai campi, però non scorre, dovrei modificare anche il file js?????

**albx87** · 23-05-2011, 22:17

mmm...hai provato ad usare solo uno script....cioè:

tu usi uno script per ogni galleria, prova ad usarne uno generale...cioè dai alle gallerie una class="stepcarousel mygallery" invece che un id e prova a vedere se uno script solo te lo prende...
Altra cosa: per chiarezza, secondo me, metti entrambe le funzioni sotto un unico tag <script></script>, non vedo il motivo di dividerli....mi spiace non poterti aiutare di più...mi hai messo curiosità tu per questo script me lo sto vedendo ora pure io....

**Lorenzomea** · 24-05-2011, 09:23

Ciao sono riucito a risolvere, alla fine basta cambiare solo ID per le due gallery e lasciare il resto invariato in pratica, richiamo la stessa funzione per due ID diversi lasciato tutto le altri componenti ( class belt...ecc )invariati.

Grazie mille per il supporto

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alessandro Bassetti-architectures</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"   src="js/jquery-1.4.2.min.js"></script>	
	<script type="text/javascript"   src="js/stepcarousel.js">
            /***********************************************
            * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library 
            (www.dynamicdrive.com)
            * Visit http://www.dynamicDrive.com for hundreds of DHTML   scripts
            * This notice must stay intact for legal use
            ***********************************************/
    </script>

    
	



	<script type="text/javascript">

					
						
	stepcarousel.setup({
	galleryid: 'mygallerya', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:true, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['img/frecceSX.gif', -20,75], rightnav: ['img/frecceDX.gif',70, 75]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})					

					

	</script>
    
    
    
    

	<script type="text/javascript">

	stepcarousel.setup({
	galleryid: 'mygalleryb', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:true, persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['img/frecceSX1.gif',-20,75], rightnav: ['img/frecceDX1.gif',70,75]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})					

					

	</script>
        
    
    
    <style>
	
.stepcarousel { position: relative;
               
                overflow: hidden; 
                width: 784px; height:166px; }
 
.stepcarousel .belt { position: absolute;
                      }
 
.stepcarousel .panel { float: left;
                       overflow: hidden;
                        /* Margine attorno ai pannelli */
                       width: 166px; /* Larghezza di ogni pannello,            */
                                     /* se rimosso ogni larghezza viene        */
                                     /* adattata automaticamente al contenuto. */
                     }
#mygallerya, #mygalleryb{
			width:784px;
			left:70px;
			
}					 
					 
.linkCA{
	position:absolute;
	width: 204px;
	height:61px;
	bottom:-63px;
	}
	

	</style>				 


	
	
</head>

<body>

<div class="contenitoreHP">

			<div class="ritornohome" >
			[img]img/RitornoHome.gif[/img]
    		</div>
    
    
<div class="boxcornice">
    
    		[img]img/completed.gif[/img]
            
     
            
                        <div id="mygallerya" class="stepcarousel">
 
  <div class="belt">
    <div class="panel">[img]img/F 1A.gif[/img]</div>
    <div class="panel">[img]img/F 2A.gif[/img]</div>
    <div class="panel">[img]img/F 3A.gif[/img]</div>
    <div class="panel">[img]img/F 4A.gif[/img]</div>


  </div>
 
			</div>

            
           	[img]img/projects.gif[/img] 
            
                        <div id="mygalleryb" class="stepcarousel">
 
  <div class="belt">
    <div class="panel">[img]img/F 1B.gif[/img]</div>
    <div class="panel">[img]img/F 2B.gif[/img]</div>
    <div class="panel" id="project"><a href= "Valdisasso.html">[img]img/F 3B.gif[/img]</div>


  </div>
 
            

            
</div>

			<div class="linkCA">
        	[img]img/LinkContatti.gif[/img]
        	[img]img/architectures-linked.gif[/img]
            </div>

       
</div>
     
            	<div align="right">
         		<p style="font-family:Arial, Helvetica, sans-serif; font-size:7pt; color:#666666">P.IVA 0000000000</p>
               	</div>

</body>
</html>

Discussione: 2 Gallery scorrevoli stessa pagina

Strumenti discussione

Ricerca discussione

Visualizza

2 Gallery scorrevoli stessa pagina

Permessi di invio