Jump to content
php.lv forumi
  • 0

Attēlu slider + slaideriem līdzi mainās teksts (jquery)


Question

Posted (edited)

Man lapā atrodas attēlu sliders (jquery). Attēli tiek mainīti ar 5 sec intervālu. Vajag lai reizē ar attēliem arī mainītos šinī div'ā teksts.

 

// (JQUERY) CYCLE LITE
$(document).ready(function() 
{
 $('#SlideShow').cycle
 ({
    prev: '#prev',
    next: '#next',
    timeout: 5000 // 0 - stopped
 });
});

[..]


<div id="SlideText"> Šeit katram attēlam atbilstošs savs unikāls teksts </div>
<div id="SlideShow">
 <img src="Images/login_ico_1.png" />
 <img src="Images/login_ico_2.png" />
 <img src="Images/login_ico_3.png" />
</div>

 

Pavisam labs risinājums būtu ja izdotos šo tekstu (<div id="SlideText"> Šeit katram attēlam atbilstošs savs unikāls teksts </div>) dabūt iekš SlideShow div'a. (Vizualizēta šī varianta ideja)

Edited by senters

4 answers to this question

Recommended Posts

  • 0
Posted

Es būtu muļķis, bet es taisītu tādā veidā.

Nokopētu šo JS funkcijas daļu, attiecīgi nomainītu DIV name vārdu un viss ! Tekstu pielāgotu pēc vaidzības.

  • 0
Posted (edited)

Šādi es pats izdarīju, bet iespējams, ka tas darbojas tikai uz <img>, kas tajā divā tiek sakrauti viens pēc otra (sk.zemāk). Kā ar tekstu panākt līdzīgu efektu, nezinu.

 

Šāds kods:

// (JQUERY) CYCLE LITE IMAGE
$(document).ready(function() 
{
 $('#SlideShow').cycle
 ({
    prev: '#prev',
    next: '#next',
    timeout: 5000 // 0 - stopped
 });
});

// (JQUERY) CYCLE LITE TEXT
$(document).ready(function() 
{
 $('#SlideText').cycle
 ({
    prev: '#prev',
    next: '#next',
    timeout: 5000 // 0 - stopped
 });
 });

 

<div id="SlideText">
 teksts teksts teksts
</div>

[..]

<div id="SlideShow">
 <img src="Images/login_ico_1.png" title="asd" />
 <img src="Images/login_ico_2.png" title="aasxaass" />
</div>

Edited by senters
  • 0
Posted (edited)

Šitā :

<div id="SlideText">
 <div> 1Text,Text,Text </div>
 <div> 2Text,Text,Text </div>
 <div> 3Text,Text,Text </div>
</div>

Edited by euphoric
Guest
This topic is now closed to further replies.
×
×
  • Create New...