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
screen2.csscodice: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 */
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'ideacodice: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 */![]()

Rispondi quotando