[ JO ]
Legacy Member
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 CSS
De html gwn in een 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
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
