-
23-03-2010, 23:09 #1
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:
De CSSCode: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 html gwn in een ulCode:/* 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; }
Ik hoop dat ik het wat duidelijk heb kunnen maken.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>
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!
JonasBe cabbage, be U!
no votes
-
-
24-03-2010, 00:05 #2Member
- 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 grootno votes
-
24-03-2010, 10:14 #3
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
-
24-03-2010, 11:22 #4
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
naarCode:li[i].style.backgroundImage = ‘url(’ + li[i].getElementsByTagName(’img’)[0].src + ‘)’;
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).Code:li[i].style.backgroundImage = 'url(' + i + '.jpg)';
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.beno votes
-
24-03-2010, 19:06 #5
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
-
24-03-2010, 19:49 #6Member
- 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
-
24-03-2010, 20:22 #7
Volgens mij lukt dat niet hoor... Of ik doe wat verkeerd wss..
Be cabbage, be U!
no votes
-
25-03-2010, 10:26 #8dit lukt, maar dan moet je nog iets aanpassen in javascript. Maar ben niet zo goe in javascript om dit te fixen.Waarom zet ge gewoon geen height en width op uw img object als ge niet het midden maar een verkleinde versie wilt als thumbnail?
Als je bijvoorbeeld de map 'fotothumbs' wilNog een bijkomend vraagje dan. Hoe verander ik het script dat ik de thumbnails in een folder kan zetten ipv allemaal in dezelfde map?
normaal zou dit moeten werken danCode:li[i].style.backgroundImage = 'url(fotothumbs/' + i + '.jpg)';
Bij mij werkt het nog als je er een div rond zet? Je moet gewoon zorgen dat het id van die <ul> gallery noemtDaardoor 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
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.beno votes
-
25-03-2010, 14:10 #9
OK thanks!
Be cabbage, be U!
no votes
