1. #1
    [ JO ]'s Avatar
    Registered
    09/05/06
    Location
    Zottegem
    Posts
    781
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)

    Javascript image gallery thumbnail

    Hallo iedereen

    Voor school moeten we een image gallery maken in javascript. Eigenlijk moeten we er eentje halen van internet dat voldoet aan onze eisen en anders beetje aanpassen. Nu heb ik een simpele gevonden, wat ik wil, maar als thumbnails cropped hij de image ipv een kleine weergaven van de afbeelding.

    Ik heb al zitten zoeken, maar javascript krijgk pas later. Dan moeten we het echt allemaal snappen, nu mogen we gewoon copy pasten eigenlijk.

    Hoe kan ik dus de thumbnails als kleine afbeelding krijgen.

    Javascript:
    Code:
    var gal = {
    init : function() {
    if (!document.getElementById || !document.createElement || !document.appendChild) return false;
    if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
    var li = document.getElementById('jgal').getElementsByTagName('li');
    li[0].className = 'active';
    for (i=0; i<li.length; i++) {
    li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
    li[i].title = li[i].getElementsByTagName('img')[0].alt;
    gal.addEvent(li[i],'click',function() {
    var im = document.getElementById('jgal').getElementsByTagName('li');
    for (j=0; j<im.length; j++) {
    im[j].className = '';
    }
    this.className = 'active';
    });
    }
    },
    addEvent : function(obj, type, fn) {
    if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
    }
    else if (obj.attachEvent) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent("on"+type, obj[type+fn]);
    }
    }
    }
    gal.addEvent(window,'load', function() {
    gal.init();
    });
    De CSS
    Code:
    /* general styling for this example */
    * { margin: 0; padding: 0; }
    body { padding: 20px; }
    /* begin gallery styling */
    #jgal { list-style: none; width: 200px; }
    #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
    #jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
    #jgal li.active img { display: block; }
    #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
    
    /* styling without javascript */
    #gallery { list-style: none; display: block; }
    #gallery li { float: left; margin: 0 10px 10px 0; }
    De html gwn in een ul
    Code:
    <<ul id="gallery">
    <li><img src="images/bla.jpg" alt="bla"></img></li>
    <li><img src="images/bla.jpg" alt="bla"></img></li>
    <li><img src="images/bla.jpg" alt="bla"></img></li>
    </ul>
    Ik hoop dat ik het wat duidelijk heb kunnen maken.
    Het komt eigenlijk gewoon van deze site.
    Onderaan staat ongeveer wat je moet doen voor kleine afbeeldingen, maar niet echt duidelijk wat je moet doen.

    Alvast bedankt!
    Jonas
    Be cabbage, be U!
    no votes  

  2. #2
    Jerre Muesli's Avatar
    Registered
    08/09/02
    Location
    -
    Posts
    2,044
    iTrader
    9 (100%)
    Mentioned
    0 Post(s)
    Reputation
    3/6
    Ik snap je vraag niet goed.
    Maar er zijn geen 'grote' en 'kleine' afbeeldingen.
    Het zijn beiden de grote afbeelding alleen dat er bij de thumbnail css op gebruikt is om het midden te tonen.
    Als je klikt op een thumbnail krijgt de list item de klasse active en door wat css magie krijg je deze ook int groot
    no votes  

  3. #3
    [ JO ]'s Avatar
    Registered
    09/05/06
    Location
    Zottegem
    Posts
    781
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Ok wat ik dus wil is dat de thumbnail een kleine weergave is van de grote afbeelding en niet alleen het midden. Ik heb geprobeerd in CSS, maar het lukte me niet. Ik kan alleen de linkerbovenhoek krijgen ipv midden.
    Volgens mij moet ik ook iets veranderen in javascript, maar daar kom ik dus niet aan uit...
    Toch alvast bedankt!
    Be cabbage, be U!
    no votes  

  4. #4
    etl_mx's Avatar
    Registered
    15/12/03
    Location
    qsdsqdsqd
    Posts
    47
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ik zou voorstellen om het scriptje wat aan te passen, zodanig dat het je eigen thumbnails gebruikt. Nadeel is dan je dan zelf de thumnnails moet maken.

    verander in je script
    Code:
    li[i].style.backgroundImage = ‘url(’ + li[i].getElementsByTagName(’img’)[0].src + ‘)’;
    naar

    Code:
    li[i].style.backgroundImage = 'url(' + i + '.jpg)';
    Dit gaat in de folder zoeken naar images ( je thumbnails ) met naam, 0.jpg, 1.jpg, 2.jpg , ... ( dit zal afhangen hoeveel images je hebt).

    Dus jij moet gewoon je fotos rescalen naar jouw goesting en opslaan als 0.jpg, 1.jpg, ... . Aangezien 60px; height: 60px; in de CSS, raad ik je dus aan om het naar dit te rescalen.
    Dollarqueen, Rock & Roll sounds straight from the city of Bruges & it's imaginary streets of joy.
    http://www.dollarqueen.be
    no votes  

  5. #5
    [ JO ]'s Avatar
    Registered
    09/05/06
    Location
    Zottegem
    Posts
    781
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Ok thanks! Super!

    Nog een bijkomend vraagje dan. Hoe verander ik het script dat ik de thumbnails in een folder kan zetten ipv allemaal in dezelfde map?

    Thanks nog is!

    EDIT
    Hij maakt dan volgens mij automatisch divs aan he? jgal gedoe volgens mij?
    Daardoor wordt hij niet geplaats in de div die ik er rond heb geplaats in mn html code, als het bovenstaande klopt. Hoe kan ik dit oplossen?

    Hopelijk leg ik het allemaal goed uit want ik ben nog een echte noob hierin!
    EDIT2 deze vraag moet ik waarschijnlijk bij webdesign forum stellen...
    Last edited by [ JO ]; 24-03-2010 at 19:23.
    Be cabbage, be U!
    no votes  

  6. #6
    Jerre Muesli's Avatar
    Registered
    08/09/02
    Location
    -
    Posts
    2,044
    iTrader
    9 (100%)
    Mentioned
    0 Post(s)
    Reputation
    3/6
    Waarom zet ge gewoon geen height en width op uw img object als ge niet het midden maar een verkleinde versie wilt als thumbnail?
    no votes  

  7. #7
    [ JO ]'s Avatar
    Registered
    09/05/06
    Location
    Zottegem
    Posts
    781
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Volgens mij lukt dat niet hoor... Of ik doe wat verkeerd wss..
    Be cabbage, be U!
    no votes  

  8. #8
    etl_mx's Avatar
    Registered
    15/12/03
    Location
    qsdsqdsqd
    Posts
    47
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Waarom zet ge gewoon geen height en width op uw img object als ge niet het midden maar een verkleinde versie wilt als thumbnail?
    dit lukt, maar dan moet je nog iets aanpassen in javascript. Maar ben niet zo goe in javascript om dit te fixen.

    Nog een bijkomend vraagje dan. Hoe verander ik het script dat ik de thumbnails in een folder kan zetten ipv allemaal in dezelfde map?
    Als je bijvoorbeeld de map 'fotothumbs' wil

    Code:
    li[i].style.backgroundImage = 'url(fotothumbs/' + i + '.jpg)';
    normaal zou dit moeten werken dan

    Daardoor wordt hij niet geplaats in de div die ik er rond heb geplaats in mn html code, als het bovenstaande klopt. Hoe kan ik dit oplossen
    Bij mij werkt het nog als je er een div rond zet? Je moet gewoon zorgen dat het id van die <ul> gallery noemt

    Code:
    <div id="test">
    <ul id="gallery">
    <li><img src="http://natuurweetjes.maakjestart.nl/images/vlinders_in_de_natuur.jpg" alt="bla"></img></li>
    <li><img src="http://natuurweetjes.maakjestart.nl/images/vlinders_in_de_natuur.jpg" alt="bla"></img></li>
    <li><img src="http://natuurweetjes.maakjestart.nl/images/vlinders_in_de_natuur.jpg" alt="bla"></img></li>
    </ul>
    </div>
    Dollarqueen, Rock & Roll sounds straight from the city of Bruges & it's imaginary streets of joy.
    http://www.dollarqueen.be
    no votes  

  9. #9
    [ JO ]'s Avatar
    Registered
    09/05/06
    Location
    Zottegem
    Posts
    781
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    OK thanks!
    Be cabbage, be U!
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in