aiuto incompatibilità fra script

**nevrotica90** · 20-09-2009, 16:33

allora vi spiego..ho preso da internet avrei una galleria realizzata in javascript...e poi a parte un menu solo che al momento che ho unito entrambe le cose credo di aver un incompatibilità fra gli script e nn saprei come fare

qua c'è la pagina che contiene sia il menu che la galleria:

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=iso-8859-1" />
<title>.::† Galleria  †::.</title>

<link rel="stylesheet" href="../css/gallery.css" />
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/gallery/jQuery.jGlideMenu.067.min.js"></script>
<script type="text/javascript" src="../js/gallery/menu.js"></script>
</head><body>

<div id="wall"></div><div id="home">
[img]../images/gallery/1.png[/img]</div>

<div class="jGM_box" id="jGlide_001">

		
		<ul id="tile_001" class="jGlide_001_tiles" alt="">
			<li rel="tile_002">Foto Scattate
			<li rel="tile_003">Sfondi
			<li rel="tile_004">Mie creazioni
			[*]Prova 1 ù.ù
			[*]Prova 2 ù.ù
			[*]Prova 3 ù.ù
			[*]Prova 4 ù.ù
		[/list]
		<ul id="tile_002" class="jGlide_001_tiles" alt="">
			[*]Palermo
			[*]Ragusa
			[*]Siracusa
			[*]Piana degli albanesi
			[*]Cerda
			[*]Polizzi Generosa
			[*]Bivona
			[*]Varie
		[/list]
		<ul id="tile_003" class="jGlide_001_tiles" alt="">
			[*]Sfondino
		[/list]
		<ul id="tile_004" class="jGlide_001_tiles"  alt="">[*]aaa
			[*]bbb
			[*]ccc[/list]
		<ul id="tile_005" class="jGlide_001_tiles"alt="">[*]Link to ASL[/list]
</div>

	<ul id="slideshow"><div id="errore"><div id="p">Per poter visualizzare correttamente la pagina devi abilitare i javascript dal tuo browser</div></div>
		[*]
			<h3>TinySlideshow v1</h3>
			<span>photos/orange-fish.jpg</span>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			[img]thumbnails/orange-fish-thumb.jpg[/img]
		
		[*]
			<h3>Sea Turtle</h3>
			<span>photos/sea-turtle.jpg</span>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			[img]thumbnails/sea-turtle-thumb.jpg[/img]
		
		[*]
			<h3>Red Coral</h3>
			<span>photos/red-coral.jpg</span>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			[img]thumbnails/red-coral-thumb.jpg[/img]
		
		[*]
			<h3>Coral Reef</h3>
			<span>photos/coral-reef.jpg</span>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			[img]thumbnails/coral-reef-thumb.jpg[/img]
		
		[*]
			<h3>Blue Fish</h3>
			<span>photos/blue-fish.jpg</span>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			[img]thumbnails/blue-fish-thumb.jpg[/img]
		
		[*]
			<h3>TinySlideshow v.2</h3>
			<span>photos/yellow-fish.jpg</span>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			[img]thumbnails/yellow-fish-thumb.jpg[/img]
		
		[*]
			<h3>Squid</h3>
			<span>photos/squid.jpg</span>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			[img]thumbnails/squid-thumb.jpg[/img]
		
		[*]
			<h3>Small Fish</h3>
			<span>photos/small-fish.jpg</span>
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			[img]thumbnails/small-fish-thumb.jpg[/img]
		
	[/list]
	<div id="wrapper">
		<div id="fullsize">
			<div id="imgprev" class="imgnav" title="Previous Image"></div>
			<div id="imglink"></div>
			<div id="imgnext" class="imgnav" title="Next Image"></div>
			<div id="image"></div>
			<div id="information">
				<h3></h3>
				

</p>
			</div>
		</div>
		<div id="thumbnails">
			<div id="slideleft" title="Slide Left"></div>
			<div id="slidearea">
				<div id="slider"></div>
			</div>
			<div id="slideright" title="Slide Right"></div>
		</div>
	</div>
<script type="text/javascript" src="../js/gallery/compressed.js"></script>
<script type="text/javascript" src="../js/gallery/galleria.js"></script>
</body>
</html>

qua invece c'è il css che ho usato:

codice:

/*********************Galleria************************************/
body {margin:0; background:#000; padding:5px; font:11px Verdana,Arial;}
a img{border:none;}

#slideshow {list-style:none; color:#fff; }
#slideshow span {display:none}
#errore{width:600px; margin:28% 0% 72% 17%; text-align:center;}
#p {padding: 10px 10px 10px 10px; color:#525757; font-family: Arial; font-weight: bold;}
#wrapper {width:706px; margin:0 0 0 270px; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:700px; height:500px; padding:2px; border:1px solid #333; background:#000}

#information {
position:absolute; 
bottom:0; 
width:700px; 
height:0; 
background:#000; 
color:#fff; 
overflow:hidden; 
z-index:200; 
opacity:.7; 
filter:alpha(opacity=70)
}

#information h3 {padding:4px 8px 3px; font-size:12px}
#information p {padding:0 8px 8px}
#image {width:700px; height:490;}
#image img {position:absolute; z-index:25; margin-top:5px;}
.imgnav {position:absolute; width:25%; height:490px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(../images/gallery/left.gif) left center no-repeat}
#imgnext {right:0; background:url(../images/gallery/right.gif) right center no-repeat}
#thumbnails {margin-top:15px}

#slideleft {
float:left; 
width:20px; 
height:81px; 
background:url(../images/gallery/scroll-left.gif) center center no-repeat; 
background-color:#222
}

#slideright {
float:right; 
width:20px; 
height:81px; 
background:#222 url(../images/gallery/scroll-right.gif) center center no-repeat
}

#slideleft:hover {background-color:#333}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:655px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:2px solid #666; padding:1px}

/*********************Menu Galleria css vario************************************/
body { font-family: verdana, arial, sans-serif; color: #535353; font-size: .62em; }
#launch { font-family: tahoma,sans-serif; }
a#launch { text-decoration: none; color: #535353; }
a#launch:HOVER { text-decoration: underline; color: #f90; }
.ifM_header { cursor: Move; }
#overview a { color: darkgreen; text-decoration: none; }
#overview a:HOVER { color: #f90; }

/*********************Menu Galleria************************************/
#wall{ 
position: absolute;
top: 100px; 
left: 10px; 
width: 236px; 
height: 346px; 
background-image: url(../images/gallery/bg.png);
margin: 0; 
padding: 0;
overflow: hidden;}

#home{ 
position: absolute;
top: 142px; 
left: 80px; 
width: 99px; 
height: 26px; 
margin: 0; 
padding: 0;
overflow: hidden;}

.jGM_box{ 
position: absolute;
top: 168px; 
left: 30px; 
width: 185px; 
height: 225px; 
background:#000;
margin: 0; 
padding: 0;
overflow: hidden; }

.jGM_wrapper { 
position: absolute; 
top: 0; 
left: 0; 
width: 236px; 
height: 288px; 
margin: 0; 
padding: 0; 
border: 0; } /* overflow: hidden; */

.jGM_pager { 
height: 18px; 
width: 213px; 
line-height: 18px; 
margin: 0; 
border: 0; 
padding: 0; 
background: #000000;
color: #fff; 
text-align: center; 
vertical-align: middle;}

.jGM_pager a{ 
text-decoration: none; 
color: #fff; 
font-weight: bold; 
text-decoration: none; 
color: #fff; 
display: block;}

.jGM_pager a:HOVER { background: #000000; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content { width: 213px; height: 167px; margin: -15px 0; padding: 0; border: 0; overflow: hidden; }
.jGM_content a { 
text-decoration: none; 
color: #999; 
height: 18px; 
width: 100%; 
display: block; 
line-height: 18px; 
padding: 0 0 0 10px; 
background-color: #111; 
margin: 1px 0;}

.jGM_content a:HOVER { color: #fff; background-color: #333; }
.jGM_more { 
background-image: url(../images/gallery/arrow.gif);
 background-repeat: no-repeat;
 background-position: 170px 50%;}
.jGM_back{ 
position: absolute; 
top: 193px; 
right: 33px; 
height: 18px; 
width: 52px; 
background: #d1d1d1; 
color: #fff; 
line-height: 18px;
vertical-align: middle; 
text-align: center; 
margin: 10px 0 0 0; 
padding: 0; 
border: 0; 
z-index: 99; }
.jGM_back a{ height: 100%; width: 100%; text-decoration: none; color: #fff; display: block; }
.jGM_back a{ color: #fff; background: #111; }
.jGM_back a:HOVER { color: #fff; background: #333; }
.jGM_reset{ 
position: absolute; 
top: 193px; 
right: 93px; 
height: 18px; 
width: 52px; 
background: #d1d1d1; 
color: #fff; 
line-height: 18px;
vertical-align: middle; 
text-align: center; 
margin: 10px 0 0 0; 
padding: 0; 
border: 0; 
z-index: 99;}

.jGM_reset a { height: 100%; width: 100%; text-decoration: none; color: #fff; display: block; }
.jGM_reset a { color: #fff; background: #111; }
.jGM_reset a:HOVER { color: #fff; background: #333; }

QUI invece trovate gli script...

togliendo compressed.js il menu funziona ma la galleria no..nn so piu dove sbattere la testa

**axlman** · 20-09-2009, 20:44

Per quel poco che ne so gli script li devi mettere nell'head e non nel body.
Se poi vuoi che qualcuno ci guardi approfonditamente, rendi leggibile il tutto, tipo:
negli ul metti un solo li di esempio, tanto gli altri sono uguali
invece di quella pappardella di Ipsum lorem ecc mettici TESTO (che altrimenti va fuori pagina rendendo difficile leggerlo)
nel CSS metti solo le classi che interessano al problema, non tutte quante.

E il js mettilo qui, invece di farlo scaricare.

**Enzaccio** · 20-09-2009, 22:54

Vedi se negli script ti ritrovi più di un window.onload

Aiutati con la funzione del tasto F3 della tastiera, per trovare "il coso".

**nevrotica90** · 21-09-2009, 23:39

allora ho controllato e c'è solo un window.onload...gli script sono almeno 5 per semplicità li ho caricati..scusate se ho combinato un macello postando il sorgente ma vado sempre un po di fretta x mancanza di tempo

, alla fine x semplicità ho optato per dividere le due pagine con un frame..cosa che ha funzionato alla grande gli script nn vanno piu in conflitto solo che adesso ho un altro problema con i link..non riesco ad aprirli mi da questo errore...x semplicità il link è quello di google..ma è la stessa cosa con i collegamenti fra le pagine

se qualcuno mi saprebbe aiutare

grazie

**nevrotica90** · 23-09-2009, 14:20

nessuno sa come aiutarmi?

**nevrotica90** · 25-09-2009, 15:39

Allora riposto meglio il codice cosi diventa molto piu leggibile...per evitare l'incompatibilità con gli script per semplicità mia visto che cmq sono alle prime armi ho diviso la galleria dal menu con un frame..

qui c'è il frame:

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=iso-8859-1" />
<title>.::† Galleria  †::.</title>
</head>
<frameset cols="260,50%" border=0>
  <frame src="menu.html" name="menu" scrolling="NO" noresize >
  <frame src="gallery.html" name="galleria">
</frameset>
<body></body></html>

Qui c'è la galleria (x intenderci il frame Principale):

Codice PHP:


<!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>

<link rel="stylesheet" href="../css/gallery.css" />

 

</head><body>



    <ul id="slideshow"></div>

        [*]

            <h3>Sea Turtle</h3>

            <span>photos/sea-turtle.jpg</span>

                        

Testo</p>

            [img]thumbnails/sea-turtle-thumb.jpg[/img]

        

        [*]

            <h3>Red Coral</h3>

            <span>photos/red-coral.jpg</span>

                        

Testo</p>

            [url="#"][img]thumbnails/red-coral-thumb.jpg[/img][/url]

        

            [/list]

    <div id="wrapper">

        <div id="fullsize">

            <div id="imgprev" class="imgnav" title="Previous Image"></div>

            <div id="imglink"></div>

            <div id="imgnext" class="imgnav" title="Next Image"></div>

            <div id="image"></div>

            <div id="information">

                <h3></h3>

                

</p>

            </div>

        </div>

        <div id="thumbnails">

            <div id="slideleft" title="Slide Left"></div>

            <div id="slidearea">

                <div id="slider"></div>

            </div>

            <div id="slideright" title="Slide Right"></div>

        </div>

    </div>

<script type="text/javascript" src="../js/gallery/compressed.js"></script>

<script type="text/javascript" src="../js/gallery/galleria.js"></script>

</body>

</html>

Mentre qui c'è il menu (il frame sinistro):

Codice PHP:


<!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>

<link rel="stylesheet" href="../css/gallery.css" />

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="../js/gallery/jQuery.jGlideMenu.067.min.js"></script>

<script type="text/javascript" src="../js/gallery/menu.js"></script>

</head><body>



<div class="jGM_box" id="jGlide_001">



        <ul id="tile_001" class="jGlide_001_tiles" alt="">

            <li rel="tile_002">Foto Scattate

            [*][url="#"]Prova 1 ù.ù[/url]

        [/list]



        <ul id="tile_002" class="jGlide_001_tiles" alt="">

            [*][url="palermo.html"]Palermo[/url]

            [*][url="ragusa.html"]Ragusa[/url]

        [/list]

</div>

</body>

</html>

Questo è il Css che ho utilizzato:

Codice PHP:


/*********************Galleria************************************/

#slideshow {list-style:none; color:#fff; } #slideshow span {display:none}

#wrapper {width:706px; margin:0 0 0 25px; display:none} #wrapper * {margin:0; padding:0} 

#fullsize {position:relative; width:700px; height:500px; padding:2px; border:1px solid #333;

background:#000}

#information {position:absolute; bottom:0; width:700px; height:0; background:#000; color:#fff; 

overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}



#information h3 {padding:4px 8px 3px; font-size:12px} #information p {padding:0 8px 8px}

#image {width:700px; height:490;} 

#image img {position:absolute; z-index:25; margin-top:5px;}

.imgnav {position:absolute; width:25%; height:490px; cursor:pointer; z-index:150}

#imgprev {left:0; background:url(../images/gallery/left.gif) left center no-repeat}

#imgnext {right:0; background:url(../images/gallery/right.gif) right center no-repeat}

#thumbnails {margin-top:15px}



#slideleft {float:left; width:20px; height:81px; 

background:url(../images/gallery/scroll-left.gif) center center no-repeat; 

background-color:#222}



#slideright {float:right; width:20px; height:81px; 

background:#222 url(../images/gallery/scroll-right.gif) center center no-repeat}



#slideleft:hover {background-color:#333}

#slideright:hover {background-color:#333}



#slidearea {float:left; position:relative; width:655px; margin-left:5px; height:81px;

overflow:hidden}



#slider {position:absolute; left:0; height:81px}

#slider img {cursor:pointer; border:2px solid #666; padding:1px}



/*****************Menu css vario*******************************/

#launch { font-family: tahoma,sans-serif; }

a#launch { text-decoration: none; color: #535353; }

a#launch:HOVER { text-decoration: underline; color: #f90; }

.ifM_header { cursor: Move; }

#overview a { color: darkgreen; text-decoration: none; }

#overview a:HOVER { color: #f90; }



/*********************Menu Galleria**************************/

.jGM_box{ position: absolute; top: 168px; left: 30px; width: 185px; height: 225px;

background:#000; margin: 0; padding: 0; overflow: hidden; }



.jGM_wrapper { position: absolute; top: 0; left: 0; width: 236px; height: 288px; 

margin: 0; padding: 0; border: 0; } /* overflow: hidden; */



.jGM_pager { height: 18px; width: 213px; line-height: 18px; margin: 0; border: 0;

padding: 0; background: #000000; color: #fff; text-align: center; 

vertical-align: middle;}



.jGM_pager a{ text-decoration: none; color: #fff; font-weight: bold; 

text-decoration: none; color: #fff; display: block;}



.jGM_pager a:HOVER { background: #000000; }

.jGM_pager img { border: 0; margin: 6px 0; }



.jGM_content { width: 213px; height: 167px; margin: -15px 0; padding: 0; 

border: 0; overflow: hidden; }



.jGM_content a { text-decoration: none; color: #999; height: 18px; width: 100%; 

display: block; line-height: 18px; padding: 0 0 0 10px; background-color: #111; 

margin: 1px 0;}



.jGM_content a:HOVER { color: #fff; background-color: #333; }



.jGM_more { background-image: url(../images/gallery/arrow.gif);

 background-repeat: no-repeat; background-position: 170px 50%;}



.jGM_back{ position: absolute; top: 193px; right: 33px; height: 18px; width: 52px; 

background: #d1d1d1; color: #fff; line-height: 18px; vertical-align: middle; 

text-align: center; margin: 10px 0 0 0; padding: 0; border: 0; z-index: 99; }



.jGM_back a{ height: 100%; width: 100%; text-decoration: none; color: #fff;

display: block; }



.jGM_back a{ color: #fff; background: #111; }

.jGM_back a:HOVER { color: #fff; background: #333; }



.jGM_reset{ position: absolute; top: 193px; right: 93px; height: 18px; width: 52px; 

background: #d1d1d1; color: #fff; line-height: 18px; vertical-align: middle;

text-align: center; margin: 10px 0 0 0; padding: 0; border: 0; z-index: 99;}



.jGM_reset a { height: 100%; width: 100%; text-decoration: none; color: #fff;

display: block; }



.jGM_reset a { color: #fff; background: #111; }

.jGM_reset a:HOVER { color: #fff; background: #333; }

Poi i principali js invece sono:

- Galleria.js

Codice PHP:


    $('slideshow').style.display='none';

    $('wrapper').style.display='block';

    var slideshow=new TINY.slideshow("slideshow");

    window.onload=function(){

        slideshow.auto=true;

        slideshow.speed=5;

        slideshow.link="linkhover";

        slideshow.info="information";

        slideshow.thumbs="slider";

        slideshow.left="slideleft";

        slideshow.right="slideright";

        slideshow.scrollSpeed=4;

        slideshow.spacing=5;

        slideshow.active="#fff";

        slideshow.init("slideshow","image","imgprev","imgnext","imglink");

    }

-Menu.js

Codice PHP:


        $(document).ready(function(){

            // Initialize Menu

            $('#jGlide_001').jGlideMenu({

                tileSource    : '.jGlide_001_tiles' ,

                demoMode    : true,

                useDragDrop    : false,

                displayToggle    : true,

                closeLinkMarkUp    : ' '

            }).show();

        });

QUI trovate il resto degli script che ho utilizzato.

Ho provato a settare questo valore:

Codice PHP:


 demoMode    : false,

ma una volta cliccato sul link mi apre la pagina sul frame sinistro mentre vorrei che l'aprisse sul frame principale...ok spero che ora si capisce molto meglio di prima..scusate x i disagi che ho creato

Discussione: aiuto incompatibilità fra script

Strumenti discussione

Ricerca discussione

Visualizza

aiuto incompatibilità fra script

Permessi di invio