Jquery Slideshow complicato

**hutton** · 11-05-2011, 10:08

Salve,
Premetto che non sono esperto di Jquery ma sto cercando di imparare, però ho un bel problema con uno slideshow molto particolare.

Ho una lista dove ci sono dei link che corrispondono, ognuno di loro, ad un'immagine differente; cliccando su uno di essi parte una funzione in jquery che visualizza un DIV che contiene i dettagli di quell'immagine.
Ovviamente cliccando il link successivo, questo DIV aperto non si dovrebbe chiudere, ma dovrebbe essere visualizzato il dettaglio dell'immagine successiva.
Il problema è questo... i dettagli vorrei che fossero visualizzati attraverso uno slideshow tipo easySlider, però non so come dire a jquery quale dettaglio attivare in slide a seconda del link premuto senza che la funzione vada in TILT.

Vi posto il codice:

Questo è il jquery

codice:

$(document).ready(function ()
{
	//Hide (Collapse) the toggle containers on load
	$("#workExtend").hide();
	
	$(".thumbContainer>a").click(function ()
	{
		$("#workContainer>div").hide();
		$("#workExtend").show("slow");
		$("#workContainer>div").filter(this.hash).slideToggle("slow");
		
		// QUI VA RICHIAMATO LO SLIDE A SECONDA DEL DETTAGLIO DA VISUALIZZARE
		/*$(function()
		{
			$("#slides").slides();
		});*/
	});
	$("#close-project a").click(function()
	{
		$("#workExtend").hide("slow");
	});
});

Mentre questo è l'html

codice:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <div id="workExtend">
        <div id="workHeader">
            <p id="close-project">
                <a href="javascript:void(0);" title="close">
                    close</a>
            </p>
        </div>
        <div id="workContainer">
            <div id="work1">
                <div id="slides">
					<div class="slides_container">
                        <div>
                            [img]thumbs/img-work1-01.jpg[/img]</div>
                        <div>
                            [img]thumbs/img-work1-02.jpg[/img]</div>
                        <div>
                            [img]thumbs/img-work1-03.jpg[/img]</div>
                    </div>
                </div>
            </div>
            <div id="work2">
                <div id="slides">
					<div class="slides_container">
                        <div>
                            [img]thumbs/img-work2-01.jpg[/img]</div>
                        <div>
                            [img]thumbs/img-work2-02.jpg[/img]</div>
                        <div>
                            [img]thumbs/img-work2-03.jpg[/img]</div>
                    </div>
                </div>
            </div>
            <div id="work3">
                <div id="slides">
					<div class="slides_container">
                        <div>
                            [img]thumbs/img-work3-01.jpg[/img]</div>
                        <div>
                            [img]thumbs/img-work3-02.jpg[/img]</div>
                        <div>
                            [img]thumbs/img-work3-03.jpg[/img]</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="gallery">
        <div class="thumbContainer">
            <ul>[*]link work1[*]link work2[*]link work3[/list]
        </div>
    </div>
</body>

**hutton** · 11-05-2011, 13:51

Nessuno può aiutarmi?

Un esempio di quello che ho in mente è questo:
http://8020.com/

Cliccando su work.

**hutton** · 12-05-2011, 09:53

Ancora non ho trovato una soluzione....

**hutton** · 12-05-2011, 12:06

Nessuno che possa almeno spiegarmi come procedere ?

**hutton** · 12-05-2011, 16:32

codice:

$(document).ready(function ()
{
	//Hide (Collapse) the toggle containers on load
	$("#workExtend").hide();
	
	$(".thumbContainer>a").click(function ()
	{
		//$("#workContainer>div").hide();
		$("#workExtend").show("slow");
		$("#workContainer>div").filter(this.hash).slideToggle("slow");

		/* function SLIDESHOW */
		//alert (this);
		$(this).siblings(function()
		{
			$("#slides").slides();
		});
	});
	$("#close-project a").click(function()
	{
		$("#workExtend").hide("slow");
	});

Così vengono visualizzati tutti gli slideshow presenti nell'univoco DIV "workContainer".
Ma se volessi visualizzare solamente lo slideshow relativo al link che lo richiama?

**hutton** · 12-05-2011, 16:33

ho copiato male lafunzione

codice:

$(document).ready(function ()
{
	//Hide (Collapse) the toggle containers on load
	$("#workExtend").hide();
	
	$(".thumbContainer>a").click(function ()
	{
		//$("#workContainer>div").hide();
		$("#workExtend").show("slow");
		$("#workContainer>div").filter(this.hash).slideToggle("slow");

		/* function SLIDESHOW */
		//alert (this);
		$(function()
		{
			$("#slides").slides();
		});
	});
	$("#close-project a").click(function()
	{
		$("#workExtend").hide("slow");
	});
});

**hutton** · 12-05-2011, 17:54

Il punto cruciale è questo:

codice:

$("#slides").slides();

Nel senso... come posso fare ad aggiungere a "#slide" una stringa dinamica che corrisponde all'id del link su cui ho cliccato ?
$("#slides"+idlink).slides();

Esempio:

clicco su "<a id="divprimo">" di conseguenza il parametro della funzione è come fosse

codice:

$("#slidesdivprimo").slides();

che sarà l'id del DIV che contiene lo slideshow.

Discussione: Jquery Slideshow complicato

Strumenti discussione

Ricerca discussione

Visualizza

Jquery Slideshow complicato

Permessi di invio