Active state aan thumbnails toevoegen
Ik maak gebruik van een full-screen image gallery met thumbnails die je in staat stellen om verschillende afbeeldingen te selecteren. De thumbnails worden aangemaakt via het stukje javascript hieronder.
Nu ben ik bezig deze thumbnails aan het stijlen en probeer ik een ACTIVE state toe te voegen. De normale state en hover state werken inmiddels, alleen de active state krijg ik niet werkend.
Ik heb al geprobeerd te werken met "#thumb-container img:active" alleen dit mocht niet baten.
Graag jullie advies.
Javascript
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
72
73
74
75
76
77
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
72
73
74
75
76
77
<script type="text/javascript">
var slider;
var images = [
"images/productie/1.jpg",
"images/productie/2.jpg",
"images/productie/3.jpg",
"images/productie/4.jpg",
"images/productie/5.jpg"
];
var index = 0;
var transitionSpeed = 500;
var imageIntervals = 5000;
var startIntervals;
var intervalSetTime;
var contentOpen = false;
$(document).ready(function(){
slider = $('#slider1').bxSlider({
mode: 'fade',
controls: false,
pause: imageIntervals
});
for (i=0;i<=images.length - 1;i++){
$('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>');
}
$(function() {
$.preload(images, {
init: function(loaded, total) {
$("#indicator").html("<img src='images/load.gif' />");
},
loaded_all: function(loaded, total) {
$('#indicator').fadeOut('slow', function() {
$('#left-side').fadeIn('slow');
$('#thumb-container').fadeIn('slow');
$.backstretch(images[index], {speed: transitionSpeed});
startIntervals = function (){
intervalSetTime = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
slider.goToNextSlide()
}, imageIntervals)};
startIntervals();
});
}
});
});
});
function goToContent(slideNum){
clearInterval(intervalSetTime);
index = slideNum;
$.backstretch(images[index]);
slider.goToSlide(slideNum);
if (contentOpen == false){
startIntervals();
}
};
function showContent(){
$('.content-bg').fadeIn('slow');
clearInterval(intervalSetTime);
contentOpen = true;
};
function closeContent(){
$('.content-bg').fadeOut('slow');
startIntervals();
contentOpen = false;
};
</script>
var slider;
var images = [
"images/productie/1.jpg",
"images/productie/2.jpg",
"images/productie/3.jpg",
"images/productie/4.jpg",
"images/productie/5.jpg"
];
var index = 0;
var transitionSpeed = 500;
var imageIntervals = 5000;
var startIntervals;
var intervalSetTime;
var contentOpen = false;
$(document).ready(function(){
slider = $('#slider1').bxSlider({
mode: 'fade',
controls: false,
pause: imageIntervals
});
for (i=0;i<=images.length - 1;i++){
$('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>');
}
$(function() {
$.preload(images, {
init: function(loaded, total) {
$("#indicator").html("<img src='images/load.gif' />");
},
loaded_all: function(loaded, total) {
$('#indicator').fadeOut('slow', function() {
$('#left-side').fadeIn('slow');
$('#thumb-container').fadeIn('slow');
$.backstretch(images[index], {speed: transitionSpeed});
startIntervals = function (){
intervalSetTime = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
slider.goToNextSlide()
}, imageIntervals)};
startIntervals();
});
}
});
});
});
function goToContent(slideNum){
clearInterval(intervalSetTime);
index = slideNum;
$.backstretch(images[index]);
slider.goToSlide(slideNum);
if (contentOpen == false){
startIntervals();
}
};
function showContent(){
$('.content-bg').fadeIn('slow');
clearInterval(intervalSetTime);
contentOpen = true;
};
function closeContent(){
$('.content-bg').fadeOut('slow');
startIntervals();
contentOpen = false;
};
</script>
CSS
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#thumb-container{
display:none;
}
#thumb-container img{
float:left;
border:0;
width: 0;
height: 0;
margin:2px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
}
#thumb-container img:hover{
float:left;
border:0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
}
display:none;
}
#thumb-container img{
float:left;
border:0;
width: 0;
height: 0;
margin:2px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
}
#thumb-container img:hover{
float:left;
border:0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
}
Analoog aan de <a> ? Dit is het (heel erg) korte moment tussen de klik op de link en het moment waarop de pagina weg is.
En wat ben je dan van plan?
EDIT
O ja, het gaat om die box slider
Je hebt iets in deze aard:
http://bxslider.com/examples/thumbnails-pager-method-1
En je wil dus een aparte staat voor de thumbnail van de foto die getoond wordt.
Ja?
Gewijzigd op 19/10/2012 12:10:44 door Kris Peeters
De active state dient hetzelfde te zijn als de hover.
De image gallery bevat 5 afbeeldingen en daarbij horen 5 thumbnails om de afbeeldingen te selecteren.
Zodra er bijvoorbeeld op afbeelding 2 geklikt wordt, dan dient de desbetreffende thumbnail met de onderstaande stijling gehighlight te worden.
CODE voorbeeld hover state
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#thumb-container img:hover{
float:left;
border:0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
}
float:left;
border:0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #000;
}
Toevoeging op 19/10/2012 12:12:30:
@Kris: Ja ongeveer wel, dit is dan een full-screen gallery, maar komt op hetzelfde neer ja
Toevoeging op 19/10/2012 13:46:15:
Kris Peeters op 19/10/2012 11:44:41:
Kan je in woorden uitleggen wat die actieve state precies is?
Analoog aan de <a> ? Dit is het (heel erg) korte moment tussen de klik op de link en het moment waarop de pagina weg is.
En wat ben je dan van plan?
EDIT
O ja, het gaat om die box slider
Je hebt iets in deze aard:
http://bxslider.com/examples/thumbnails-pager-method-1
En je wil dus een aparte staat voor de thumbnail van de foto die getoond wordt.
Ja?
Analoog aan de <a> ? Dit is het (heel erg) korte moment tussen de klik op de link en het moment waarop de pagina weg is.
En wat ben je dan van plan?
EDIT
O ja, het gaat om die box slider
Je hebt iets in deze aard:
http://bxslider.com/examples/thumbnails-pager-method-1
En je wil dus een aparte staat voor de thumbnail van de foto die getoond wordt.
Ja?
Kris ik merk dat met deze code de kleur verandert zodra ik erop klik, maar het is mij nog niet gelukt om deze kleur te tonen wanneer de desbetreffende afbeelding getoond wordt.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#thumb-container img:active {
float:left;
border:0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #F00;
}
float:left;
border:0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #F00;
}
Gewijzigd op 19/10/2012 13:47:01 door Sebas V