http://cssglobe.com/post/3783/jquery...content-slider
questa e l'easy slyder,in particolare ho usato quella a scorrimento orizzontale.
il plug-in funziona pero facendo scorrere singole immagini!!
io vorrei applicarla a un box di thumbs di 8 immagini (gli otto thumbs hanno applicato gia il jquery.lightbox) per far scorrere in totale 16 immagini.
ho provato ad apllicarli un div ma purtroppo separa i thumbs facendoli scorrere uno ad uno!
posto l'HTML:
<link href="PORTFOLIO.css" rel="stylesheet" type="text/css" />
<title>Lucaeffe.it</title>
<script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="JS/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<script src="JS/jquery-lightbox-0.5/jquery/jquery.wslide.js"type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#parent2").wslide({
width: 750,
height: 250,
autolink:'welcome',
fade: true,
duration: 2000
});
});
</script>
<script src="JS/easySlider/easySlider/js/easySlider.packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
prevText: 'Previous Slide',
nextText: 'Next Slide',
orientation: 'horizontal'
});
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery{
margin:250px 0 0 0;
width:100%;
height:2000px;
}
#gallery ul {
list-style: none;
padding:100px 0 0 50px;
margin:0 0 50px 0
}
#gallery ul li { display: inline; }
#gallery ul img {
margin:0 auto;
border: 5px solid #3e3e3e;
border-width:0;
}
#gallery ul a:hover img {
border: 1px solid none;
border-width:0;
color: #fff;
}
#gallery ul a:hover { color: #fff;
}
</style>
<style type="text/css" media="screen">
}
#parent2-wrap{
}
#parent2 li{
padding:30px 0 0 75px;
margin:0 auto;
color:#666;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
line-height:20px;
word-spacing:5px;
}
#parent2-menu a{
padding:0 3px;
border: 10px solid gray;
background: #eeeeee;
width:100px;
}
#parent2-menu a:hover, #parent2-menu a.wactive{
border: 1px dotted gray;
background: black;
color: #eeeeee;}
</style>
<style type="text/css" media="screen">
#slider{
margin:150px 0 0 50px;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:900px;
height:280px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">[*]illustraction[*]web[*]logo[*]advertising[/list]
</div>
<div id="header2">
<ul class="welcome"> [*]Welcome[*]About me[*]Services[*]Contact[/list]
<ul id="parent2">[*]
<h1>[img]Nuova cartella/image/welcometext.png[/img]</h1>
Ciao,sono Luca Faedda grafico,illustratore e web-designer.Attualmente vivo a Firenze.
Appassionato al mondo dell'illustrazione, graphic-design, grafica pubblicitaria e della programmzione di siti web e web-design.
L'obiettivo è quello di creare siti accessibili e dal design efficace con l'utilizzo di xHTML,CSS,JavaScript e Flash
con particolare attenzione agli standard dettati dalla W3C e al “cross-browser”;
[*]<h1>[img]Nuova cartella/image/aboutmetext.png[/img]</h1>
Diplomato all'istituto Statale d'arte I.S.A.F.F. di sassari,
frequento ora l'Accademia delle arti digitali<span class="wait">NEMO NT.</span>
[*]<h1>[img]Nuova cartella/image/services.png[/img]</h1>
Web design, realizzazione siti internet, xHtml, Css. Dal design allo sviluppo per il tuo sito sino
all'ottimizazzione sui motori di ricerca.
Illustrazioni su commissione,caricature,grafiche per t-shirt, skate, tavole da surf personalizzate.
Loghi, Brochure, volantini, business card per migliorare la tua immagine.
[*]Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.[/list]
</div>
<div id="gallery">
<div id="illustraction">[img]Nuova cartella/image/illustractio.png[/img]</div>
<ul id="slider">
[*]
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
[img]JS/jquery-lightbox-0.5/photos/thumb_image1.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
[img]JS/jquery-lightbox-0.5/photos/thumb_image2.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
[img]JS/jquery-lightbox-0.5/photos/thumb_image3.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
[img]JS/jquery-lightbox-0.5/photos/thumb_image4.jpg[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
[img]JS/jquery-lightbox-0.5/photos/thumb_image5.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
[img]JS/jquery-lightbox-0.5/photos/thumb_image6.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
[img]JS/jquery-lightbox-0.5/photos/thumb_image7.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
[img]JS/jquery-lightbox-0.5/photos/thumb_image8.png[/img]
</a>
[*]
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
[img]JS/jquery-lightbox-0.5/photos/thumb_image1.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
[img]JS/jquery-lightbox-0.5/photos/thumb_image2.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
[img]JS/jquery-lightbox-0.5/photos/thumb_image3.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
[img]JS/jquery-lightbox-0.5/photos/thumb_image4.jpg[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
[img]JS/jquery-lightbox-0.5/photos/thumb_image5.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
[img]JS/jquery-lightbox-0.5/photos/thumb_image6.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
[img]JS/jquery-lightbox-0.5/photos/thumb_image7.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
[img]JS/jquery-lightbox-0.5/photos/thumb_image8.png[/img]
</a>
[/list]
ho postato due volte le stesse 8 immagini come esempio
[.................................]
TUTTO RISOLTO POTETE BLOCCARE IL THREAD
Ho perso tutto e non ricordo piu come avevo fatto!!
chi mi puo dare una mano???
sono un cretino lo so!!!!
ho ri-risolto!!!
hahhahahaha
sembra che ogni volta che posto qui risolvo!
porterete mica fortuna?
posto il codice giusto:
<div id="slider">
<ul>
[*]
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
[img]JS/jquery-lightbox-0.5/photos/thumb_image1.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
[img]JS/jquery-lightbox-0.5/photos/thumb_image2.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
[img]JS/jquery-lightbox-0.5/photos/thumb_image3.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
[img]JS/jquery-lightbox-0.5/photos/thumb_image4.jpg[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
[img]JS/jquery-lightbox-0.5/photos/thumb_image5.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
[img]JS/jquery-lightbox-0.5/photos/thumb_image6.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
[img]JS/jquery-lightbox-0.5/photos/thumb_image7.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
[img]JS/jquery-lightbox-0.5/photos/thumb_image8.png[/img]
</a>
[*] <a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
[img]JS/jquery-lightbox-0.5/photos/thumb_image1.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
[img]JS/jquery-lightbox-0.5/photos/thumb_image2.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
[img]JS/jquery-lightbox-0.5/photos/thumb_image3.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
[img]JS/jquery-lightbox-0.5/photos/thumb_image4.jpg[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
[img]JS/jquery-lightbox-0.5/photos/thumb_image5.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
[img]JS/jquery-lightbox-0.5/photos/thumb_image6.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
[img]JS/jquery-lightbox-0.5/photos/thumb_image7.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
[img]JS/jquery-lightbox-0.5/photos/thumb_image8.png[/img]
</a>
[/list]
</div>
ciao volendo sostituire la voce per far scorrere le immagini con un pulsantino flash sai dirmi il codice da mettere all'evento on press nell swf?
grazie!
Permessi di invio
Rispondi quotando