Op zoek naar slider

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Nick Klein

Nick Klein

25/07/2011 19:50:45
Quote Anchor link
Hallo allemaal,
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?
 
PHP hulp

PHP hulp

23/12/2024 05:10:04
 
Joey Drieling

Joey Drieling

26/07/2011 08:24:50
Quote Anchor link
Maak je der een met Mootools of Jquery.
 
Chris -

Chris -

26/07/2011 08:28:31
Quote Anchor link
Joey, dat antwoord slaat nergens op. Hij vraagt om hulp, wat voegt jouw reactie toe?
 
Mitchell Mink

Mitchell Mink

26/07/2011 10:24:09
Quote Anchor link
Volgens mij kan dat ook heel simpel met
<marquee behavior="scroll" direction="left"><img src="/path/naar/logo.png" /></marquee>
 
- Ariën  -
Beheerder

- Ariën -

26/07/2011 10:30:52
Quote Anchor link
Maar marquee in in HTML 4.0 en XHTML depricated. Niet meer gebruiken dus als je jouw code valid wilt houden. Bovendien wordt marquee niet in elke browser ondersteund.
 
Bas IJzelendoorn

Bas IJzelendoorn

26/07/2011 10:32:34
Quote Anchor link
Marquee kan wel maar is niet netjes en ook niet W3C valid.

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.
 
Nick Klein

Nick Klein

26/07/2011 16:13:15
Quote Anchor link
Bedankt! http://www.smoothdivscroll.com/ lijkt inderdaad te zijn wat ik zoek.
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)
PHP script in nieuw venster Selecteer het PHP script
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
    <!-- 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>
Gewijzigd op 26/07/2011 16:32:06 door Nick Klein
 

26/07/2011 16:36:47
Quote Anchor link
Je laad in ieder geval de instellingen niet, probeer dit eens?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
$(window).load(function() {
            $("div#makeMeScrollable").smoothDivScroll({
            autoScroll: "always" ,
            autoScrollDirection: "endlessloopright",
            autoScrollStep: 1,
            autoScrollInterval: 15
            });    
        });
 
Nick Klein

Nick Klein

26/07/2011 18:06:10
Quote Anchor link
Bedankt! Dit lijkt het inderdaad op te lossen!
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?
 

26/07/2011 18:14:10
Quote Anchor link
Heb je misschien een link naar jouw slider?

Wat betreft de verwijzing, dat werkt meestal prima.. wel gebruik je nu een vrij oude versie van jQuery, inmiddels is dit 1.6.2
 
Nick Klein

Nick Klein

26/07/2011 18:34:09
Quote Anchor link
Sorry, linkje wil ik voor mijzelf houden.
Ik zal dan verwijzen naar de nieuwe versie.
 

26/07/2011 19:40:56
Quote Anchor link
zonder te kunnen zien wat het probleem is, is het vrij lastig op te lossen..
 
Nick Klein

Nick Klein

27/07/2011 14:37:22
Quote Anchor link
Alle begrip voor. In ieder geval werkt het en ben ik helemaal blij met de hulp!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.