:strip_icc():strip_exif()/u/69431/crop5d6d1438b1ba6_cropped.jpeg?f=community)
Beste mede-devers 
Ik heb laatst de nieuwe website gemaakt voor Kroymans Aston Martin, hier te vinden: http://www.astonmartin.nl
Nu heb ik op de homepage een slider met foto's van de auto's erin, deze wordt aangedreven door jQuery in combinatie met jQuery EasySlide 1.7.
Op een auto detail pagina heb ik een gallery met carousel effect, bijvoorbeeld deze pagina: http://www.astonmartin.nl/dbs
Dit wordt gedaan door jQuery, jCarousel en Galleria, met een custom effect voor het weergeven van de foto's en thumbnails:
Nu ziet het er in Firefox echt super uit!
Maar in IE7 en IE8 is de performance nou niet echt heel erg goed.
Kan iemand mij in de juiste richting wijzen hoe dit komt? Of ligt dit gewoon aan de JS engine van IE?
En is er iets om het te verbeteren?
Ik heb laatst de nieuwe website gemaakt voor Kroymans Aston Martin, hier te vinden: http://www.astonmartin.nl
Nu heb ik op de homepage een slider met foto's van de auto's erin, deze wordt aangedreven door jQuery in combinatie met jQuery EasySlide 1.7.
Op een auto detail pagina heb ik een gallery met carousel effect, bijvoorbeeld deze pagina: http://www.astonmartin.nl/dbs
Dit wordt gedaan door jQuery, jCarousel en Galleria, met een custom effect voor het weergeven van de foto's en thumbnails:
JavaScript:
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
78
79
| $(document).ready(function() { jQuery('ul.galleria').jcarousel({ start: 1, scroll: 1, animation: "fast", initCallback: initCallbackFunction }); $('ul.galleria').galleria({ history: false, insert: "#galleria_container", onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes var height = image.height(); var width = image.width(); if(width > 730) { var widthRatio = width / 730; height = Math.round(height / widthRatio); image.height(height); image.width(730); } var maxHeight = 295; var marginTop = Math.round((height - maxHeight) / 2); marginTop += 20; image.css("margin-top", "-" + marginTop + "px"); image.hide().fadeIn(500); // fetch the thumbnail container var _li = thumb.parents('li'); // fade out inactive thumbnail _li.siblings().children('img.selected').fadeTo(500,0.2); // fade in active thumbnail thumb.fadeTo('fast',1).addClass('selected'); // add a title for the clickable image image.attr('title','Next image >>'); image.removeAttr('width'); image.removeAttr('height'); image.click(stopSlideShow); // add event $('#galleria_container').trigger('image-loaded'); // to each list item $('ul.galleria li').each(function(idx) { // add data 'index' with value idx+1 $(this).data('index', (++idx)); }); }, onThumb : function(thumb) { // thumbnail effects goes here // fetch the thumbnail container var _li = thumb.parents('li'); // if thumbnail is active, fade all the way. var _fadeTo = _li.is('.active') ? '1' : '0.2'; // fade in the thumbnail when finnished loading thumb.css({display:'none',opacity:_fadeTo}).fadeIn(500); // hover effects thumb.hover( function() { thumb.fadeTo('fast',1); }, function() { _li.not('.active').children('img').fadeTo('fast',0.2); } // don't fade out if the parent is active ) var event = thumb.click; thumb.click(stopSlideShow); } }); } |
Nu ziet het er in Firefox echt super uit!
Maar in IE7 en IE8 is de performance nou niet echt heel erg goed.
Kan iemand mij in de juiste richting wijzen hoe dit komt? Of ligt dit gewoon aan de JS engine van IE?
En is er iets om het te verbeteren?
/u/8830/crop5df8eadcd55ca_cropped.png?f=community)
:strip_exif()/u/22670/td_icon2.gif?f=community)
:strip_icc():strip_exif()/u/21965/crop58637c4ab6f14_cropped.jpeg?f=community)
/u/7685/ruinmytune-60x60.png?f=community)
:strip_exif()/u/70496/glowmouse2.gif?f=community)
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
/u/241825/Avatar_for_terrorist.png?f=community){kind=avatar}
