Op zoek naar slider
Ik wil een smal balkje met de bedrijfslogo's van relaties voor op mijn website maken. Hierbij bewegen de logo's naar links zodat aan de rechterkant nieuwe logo's het balkje binnenkomen. Dit moet zeg maar een vloeiende beweging van logo's worden die van rechts naar links bewegen. Zeg maar net zoals op RTL-Z onderin beeld; zo'n tracker met nieuws/beurskoersen.
Het lukt mij om dit te doen met een animated gif. Hij bestaat dan alleen uit een 70-tal frames en dan nog beweegt het erg schokkerig. Meer frames is geen optie, omdat het bestandje dan te groot wordt.
Hoe kan ik dit beter doen? Ik wil geen flash gebruiken.
Van de week zag ik een website waar dit perfect werkte, maar helaas kan ik deze website nu niet meer vinden. De logo's bewogen net zo vloeiend als bij een flash filmpje maar het was met javascript. In de source code zag ik geloof ik iets met "begin dia" of "slide show" staan. Echter googlen hierop, dan kom ik alleen scripts tegen voor slide shows waarbij achter elkaar plaatjes worden getoond en dus niet voor een vloeiend bewegende tracker.
Googlen met de woorden carousel en slider kom ik al wat verder. Bijvoorbeeld http://www.dynamicdrive.com/dynamicindex14/carousel.htm komt in de buurt. Alleen dat zijn de plaatjes aan de zijkanten vervormd.
Weet iemand een betrouwbare slider zoals ik die zoek?
<marquee behavior="scroll" direction="left"><img src="/path/naar/logo.png" /></marquee>
Kijk anders hier eens naar:
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
Bij de laatste kom je bij deze uit, even in verdiepen en aanpassen, maar denk dat deze bij jou vraag in de buurt komt:
http://www.smoothdivscroll.com/
Je moet natuurlijk nooit verwachten dat het gelijk 100% werkt of naar jou zin is want dat kan niet xD tenzij je er iemand voor inhuurt.
Zou helemaal geweldig zijn als jullie ook bij het implementeren kunnen helpen. Onderstaande code heb ik toegevoegd en ik heb jquery.ui.widget.js en jquery.smoothDivScroll-1.1-min.js en smoothDivScroll.css geupload. De code is bijna hetzelfde als op smoothdivscroll.com. Alleen width en heigth aangepast, de verwijzingen naar afbeeldingen aangepast, en het volgende toegevoegd:
autoScroll: "always" ,
autoScrollDirection: "endlessloopright",
autoScrollStep: 1,
autoScrollInterval: 15,
Resultaat:
Het eerste plaatje is zichtbaar maar het beweegt niet, en als ik er met de muis overheen ga, heb je aan de zijkanten pijltjes (welke overigens niet werken mbt scrollen).
Wat doe ik fout? Ik hoef geen hotspots zoals op die website en ook niet dat je met de muis interactie met het plaatje kan hebben. Plus het plaatje moet direct bewegen als de pagina wordt geladen (daarom had ik ook "autoScroll: "always" , " toegevoegd).
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
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
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" />
<!-- jQuery library - I get it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI widget factory -->
<!-- You can download it as a part of jQuery UI Core
http://jqueryui.com/download -->
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
// Initialize the plugin with no custom options
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({});
autoScroll: "always" ,
autoScrollDirection: "endlessloopright",
autoScrollStep: 1,
autoScrollInterval: 15,
});
</script>
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width: 458px;
height: 83px;
position: relative;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
</style>
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="afbeeldingen/logos1.gif" alt="Demo image" />
<img src="afbeeldingen/logos2.gif" alt="Demo image" />
<img src="afbeeldingen/logos3.gif" alt="Demo image" />
<img src="afbeeldingen/logos4.gif" alt="Demo image" />
<img src="afbeeldingen/logos5.gif" alt="Demo image" />
</div>
</div>
</div>
<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" />
<!-- jQuery library - I get it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI widget factory -->
<!-- You can download it as a part of jQuery UI Core
http://jqueryui.com/download -->
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
// Initialize the plugin with no custom options
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({});
autoScroll: "always" ,
autoScrollDirection: "endlessloopright",
autoScrollStep: 1,
autoScrollInterval: 15,
});
</script>
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width: 458px;
height: 83px;
position: relative;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
</style>
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="afbeeldingen/logos1.gif" alt="Demo image" />
<img src="afbeeldingen/logos2.gif" alt="Demo image" />
<img src="afbeeldingen/logos3.gif" alt="Demo image" />
<img src="afbeeldingen/logos4.gif" alt="Demo image" />
<img src="afbeeldingen/logos5.gif" alt="Demo image" />
</div>
</div>
</div>
Gewijzigd op 26/07/2011 16:32:06 door Nick Klein
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(window).load(function() {
$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "always" ,
autoScrollDirection: "endlessloopright",
autoScrollStep: 1,
autoScrollInterval: 15
});
});
$("div#makeMeScrollable").smoothDivScroll({
autoScroll: "always" ,
autoScrollDirection: "endlessloopright",
autoScrollStep: 1,
autoScrollInterval: 15
});
});
Die pijltjes zijn ook weg als ik nu over het figuurtje beweeg.
Ik zit echter nog met het volgende probleem:
Als ik over het plaatje beweeg met de linkermuisknop ingedrukt selecteert hij het plaatje dat op dat moment voorbij komt. Anders gezegd: het "filmpje" bestaat in mijn geval uit 5 plaatjes en door over een plaatje te slepen, selecteert die dat plaatje en zie je als gebruiker dat het "filmpje" uit meerdere plaatjes bestaat. Is dit nog op te heffen?
Ook vroeg ik mij af of de externe verwijzing naar https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js Kun je dat script niet beter op je eigen server plaatsen i.p.v. zo'n externe verwijzing?
Daarnaast vind ik dat het uit best veel code bestaat. Of is die hoeveelheid code iets waar ik mij geen zorgen over hoeft te maken?
Wat betreft de verwijzing, dat werkt meestal prima.. wel gebruik je nu een vrij oude versie van jQuery, inmiddels is dit 1.6.2
Ik zal dan verwijzen naar de nieuwe versie.