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:
qua invece c'è il css che ho usato: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>
QUI invece trovate gli script...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; }
togliendo compressed.js il menu funziona ma la galleria no..nn so piu dove sbattere la testa![]()

Rispondi quotando