Ora funzionano ne più ne memeno come prima..provo a spiegartelo.
Questo è il codice HTML contenente tutti e due le gallery.
codice:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link href="PORTFOLIO2.CSS" rel="stylesheet" type="text/css" />
<link href="easyslider1.7/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="easyslider1.7/css/screen2.css" rel="stylesheet" type="text/css" media="screen" />
<script src="03/jquery.js" type="text/javascript"></script>
<script src="03/main.js" type="text/javascript"></script>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: false,
continuous: true
});
$("#slider_gallery").easySlider({
auto: true,
continuous: true
});
});
</script>
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="slider">
<ul>
[*][img]easyslider1.7/images/01.jpg[/img]
[*][img]easyslider1.7/images/02.jpg[/img]
[*][img]easyslider1.7/images/03.jpg[/img]
[/list]
</div>
</div>
</div>
<div id="container">
<ul class="tool"> [*]WHO IS LUCAEFFE?[*]ABOUT[*]HOW DO I HELP YOU?[*]CONTACT[/list]
<div id="content_gallery">
<div id="slider_gallery">
<ul>
[*][img]easyslider1.7/images/01.jpg[/img]
[*][img]easyslider1.7/images/02.jpg[/img]
[*][img]easyslider1.7/images/03.jpg[/img]
[/list]
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
A questo codice ho provato a colegare due differenti pagine CSS (screen.css e screen2.css)
Il risultato è pressochè identico.
Se non si và a premere il bottone next sulla gallery che sta immobile sembra funzionare tutto ma se si preme il next o il prev questo sposta tutte e due le gallery.
Questi due codici .CSS
Screen.css
codice:
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:0 0 0 50px;
width:674px;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#content{
position:relative;
width:600px;
margin:0 0 0 100px;
}
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
screen2.css
codice:
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:0 0 0 50px;
width:674px;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#content_gallery{
position:relative;
width:600px;
margin:0 0 0 100px;
}
/* Easy Slider */
#slider_gallery ul, #slider_gallery li,
#slider2_gallery ul, #slider2_gallery li{
margin:0;
padding:0;
list-style:none;
}
#slider2_gallery{margin-top:1em;}
#slider_gallery li, #slider2_gallery li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
Avevo pensato che fosse un buona idea creare pagine .js a parte per ogni script a cui collegare poi i relativi .css ma leconoscenze che ho non riescono a farmelo mettere in pratica....non so poi quanto buona possa essere l'idea 
Rispondi quotando
