Cycle plugin probleem
Ik heb een probleem, de src van mijn plaatjes moet worden weergegeven in de div met de class .desc
Dit is de opbouw:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide1">
<img src="images/slideshow/image_001.jpg" alt="" />
<p>Titel2</p>
</li>
<li id="slide2">
<img src="images/slideshow/image_002.jpg" alt="" />
<p>Titel3</p>
</li>
<li id="slide3">
<img src="images/slideshow/image_003.jpg" alt="" />
<p>Titel4</p>
</li>
<li id="slide4">
<img src="images/slideshow/image_001.jpg" alt="" />
<p>Titel5</p>
</li>
<li id="slide5">
<img src="images/slideshow/image_002.jpg" alt="" />
<p>Titel6</p>
</li>
<li id="slide6">
<img src="images/slideshow/image_003.jpg" alt="" />
<p>Titel7</p>
</li>
</ul>
</div>
<div class="slides-nav">
<div class="title">
\\ Spotlight
</div>
<div class="pager">
<ul>
<li class="on"><a href="#slide1">1</a></li>
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
<li><a href="#slide4">4</a></li>
<li><a href="#slide5">5</a></li>
<li><a href="#slide6">6</a></li>
</ul>
</div>
<div class="desc">
</div>
</div>
</div>
<div class="slides">
<ul>
<li id="slide1">
<img src="images/slideshow/image_001.jpg" alt="" />
<p>Titel2</p>
</li>
<li id="slide2">
<img src="images/slideshow/image_002.jpg" alt="" />
<p>Titel3</p>
</li>
<li id="slide3">
<img src="images/slideshow/image_003.jpg" alt="" />
<p>Titel4</p>
</li>
<li id="slide4">
<img src="images/slideshow/image_001.jpg" alt="" />
<p>Titel5</p>
</li>
<li id="slide5">
<img src="images/slideshow/image_002.jpg" alt="" />
<p>Titel6</p>
</li>
<li id="slide6">
<img src="images/slideshow/image_003.jpg" alt="" />
<p>Titel7</p>
</li>
</ul>
</div>
<div class="slides-nav">
<div class="title">
\\ Spotlight
</div>
<div class="pager">
<ul>
<li class="on"><a href="#slide1">1</a></li>
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
<li><a href="#slide4">4</a></li>
<li><a href="#slide5">5</a></li>
<li><a href="#slide6">6</a></li>
</ul>
</div>
<div class="desc">
</div>
</div>
</div>
Ik gebruik het volgende script om de slideshow werkend te krijgen, sorry voor de lange code
maar dit is nodig om de context van de code te begrijpen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
$slideshow = {
context: false,
tabs: false,
timeout: 3000, // time before next slide appears (in ms)
slideSpeed: 1000, // time it takes to slide in each slide (in ms)
tabSpeed: 300, // time it takes to slide in each slide (in ms) when clicking through tabs
fx: 'fade', // the slide effect to use
init: function() {
// set the context to help speed up selectors/improve performance
this.context = $('#slideshow');
// set tabs to current hard coded navigation items
this.tabs = $('.slides-nav .pager ul li', this.context);
// remove hard coded navigation items from DOM
// because they aren't hooked up to jQuery cycle
this.tabs.remove();
// prepare slideshow and jQuery cycle tabs
this.prepareSlideshow();
},
prepareSlideshow: function() {
// initialise the jquery cycle plugin -
// for information on the options set below go to:
// http://malsup.com/jquery/cycle/options.html
$('div.slides > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $('.slides-nav .pager ul', $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
after: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true,
before: function(){
$('.slides-nav .desc').html($('.slides ul li img').attr('src'))
}
});
},
prepareTabs: function(i, slide) {
// return markup from hardcoded tabs for use as jQuery cycle tabs
// (attaches necessary jQuery cycle events to tabs)
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
// get the active tab
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
// if there is an active tab
if(activeTab.length) {
// remove active styling from all other tabs
$slideshow.tabs.removeClass('on');
// add active styling to active button
activeTab.parent().addClass('on');
}
}
};
$(function() {
// add a 'js' class to the body
$('body').addClass('js');
// initialise the slideshow when the DOM is ready
$slideshow.init();
});
context: false,
tabs: false,
timeout: 3000, // time before next slide appears (in ms)
slideSpeed: 1000, // time it takes to slide in each slide (in ms)
tabSpeed: 300, // time it takes to slide in each slide (in ms) when clicking through tabs
fx: 'fade', // the slide effect to use
init: function() {
// set the context to help speed up selectors/improve performance
this.context = $('#slideshow');
// set tabs to current hard coded navigation items
this.tabs = $('.slides-nav .pager ul li', this.context);
// remove hard coded navigation items from DOM
// because they aren't hooked up to jQuery cycle
this.tabs.remove();
// prepare slideshow and jQuery cycle tabs
this.prepareSlideshow();
},
prepareSlideshow: function() {
// initialise the jquery cycle plugin -
// for information on the options set below go to:
// http://malsup.com/jquery/cycle/options.html
$('div.slides > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $('.slides-nav .pager ul', $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
after: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true,
before: function(){
$('.slides-nav .desc').html($('.slides ul li img').attr('src'))
}
});
},
prepareTabs: function(i, slide) {
// return markup from hardcoded tabs for use as jQuery cycle tabs
// (attaches necessary jQuery cycle events to tabs)
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
// get the active tab
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
// if there is an active tab
if(activeTab.length) {
// remove active styling from all other tabs
$slideshow.tabs.removeClass('on');
// add active styling to active button
activeTab.parent().addClass('on');
}
}
};
$(function() {
// add a 'js' class to the body
$('body').addClass('js');
// initialise the slideshow when the DOM is ready
$slideshow.init();
});
Bij de functie prepareSlideshow vind je het gedeelte before: blabla
Daarmee plaats ik nu de src, maar hij plaatst alleen die van de eerste
en zodra de slideshow verder gaat verandert deze niet. Op de een of andere manier
is deze dus niet dynamisch.
Ziet iemand het probleem?
Bij voorbaat dank!
Gewijzigd op 21/05/2010 15:39:32 door Justin S
Gesponsorde koppelingen:
Er zijn nog geen reacties op dit bericht.
