Samma funktion för olika bilder

[rumbleinthejungles]

Antag att vi har tre miniatyrbilder. När man klickar på en bild, får man se bilden förstorad i en popup. En möjlighet är att ge varje bild ett separat och unikt id och koppla en funktion till detta unika id. Men kan man använda en och samma funktion för alla bilder? Blir ju mer ekonomiskt så.

 

[inlägget ändrat 2009-04-29 10:36:50 av rumbleinthejungles]

[.M]

Snegla på detta...!

http://www.huddletogether.com/projects/lightbox/

 

[rumbleinthejungles]

Detta är ju en färdig lösning, dessutom en komplicerad sådan. Sedan verkar den inte precis göra det som jag vill göra. Men tack ändå!

 

[Micke_skane]

Sedan verkar den inte precis göra det som jag vill göra

Vad är det egentligen du vill göra, jag förstod inte din tanke.

 

[rumbleinthejungles]

Jag har x antal bilder. De är små bilder - miniatyrer. När man klickar på en sådan miniatyr skall den visas i originalstorlek i en helt vanlig popup.

 

Ett sätt att göra detta på är att tilldela alla bilder ett unikt ID. Om det är många bilder, blir det alltså mycket att hålla reda på. Man får lika många funktioner som det finns bilder.

 

Jag vill kunna använda en funktion.

 

Alltså: jag klickar på bild x, funktion A anropas och visar x i normalstorlek i en popup. Om jag istället klickar på bild y, anropas funktion A igen, men visar bild y i normalstorlek i en popup.

 

[inlägget ändrat 2009-04-29 12:50:42 av rumbleinthejungles]

[Micke_skane]

Och hur hämtar du bilderna, ligger t ex url:n lagrad i en databas eller den hämtas direkt ifrån en mapp?

 

[.M]

Prova

var visabild = function(bild, height, width)
{
window.open(bild, "popup", "width=" + width + ",height=" + height);
}

Denna javascript funktion skapar en popup med en bild i enligt höjd och bredd. Den anroppas genom att...

<a href="bild.jpg", onclick="visabild('bild.jpg',640,480);return false"><img src="litenbild.jpg" /></a>

Sen anpassar man bildnamnet, höjd och bredd för ens bilder.

 

[rumbleinthejungles]

Kan man göra detta utan att lägga in eventhandlers i htmlkoden som du gör? Alltså: ingen onclick i länken.

 

[.M]

Jo absolut. Fast jag har glömt hur man gör.

 

[rumbleinthejungles]

:-) :-) :-) :-)

 

[Micke_skane]

Kan man göra detta utan att lägga in eventhandlers i htmlkoden som du gör?

Lägg in bilderna i en div.

Skapa sedan ett objekt med hjälp av getElementById("divId").

För varje bildelement i diven kopplar du en .onclick(anropa popup-fönster osv...).

 

Allt detta triggar du igång med .onload i script-blocket mellan head-taggarna.

 

Ska på möte med chefen nu men kollar kanske sedan(ikväll) om du löst det.

 

[rumbleinthejungles]

Det är getElementById() som jag inte vill använda. Helst vill jag köra med getElementsByTagName().

 

[inlägget ändrat 2009-04-29 13:17:39 av rumbleinthejungles]

[inlägget ändrat 2009-04-29 13:17:58 av rumbleinthejungles]

[Anjuna Moon]

Jag förstår din tanke med att vilja koppla en eventhandler gemensamt för alla bilder, men har du inte även andra bilder på sidan som INTE skall täckas av detta?

Isåfall kommer du i minsta fall behöva ge dina tumnagelbilder ett identifierande attribut, antingen med ex. Class-attributet eller med ett egendefinierat attribut.

Annat än detta så kommer du bli tvungen att använda en onclick i tumnagelbilderna. Dessa kan du dock skapa på ett enhetligare sätt än .M visade, genom att skicka parametern this eller this.src till js-funktionen

 

[rumbleinthejungles]

Alla bilder skall täckas av detta. Rubbet! jag känner till classattributet, men det har ju begränsat stöd hos webbläsarna.

 

[Anjuna Moon]

jag känner till classattributet, men det har ju begränsat stöd hos webbläsarna.

Nejdå, Class är ett gammalt och standardiserat attribut, det är en av grundattributen i W3C:s css-standarder.

 

[rumbleinthejungles]

Jag tänkte på getElementsByClassName()

 

[Anjuna Moon]

Jag tänkte på getElementsByClassName()

Ok. Men om nu ändå alla bilder på sidan skall täckas så försök med följande:

 

<script language="JavaScript">
window.onload=function() {
var imgList=document.getElementsByTagName('IMG');
for(var i=0;i<imgList.length;i++)
{
	if(navigator.appName != 'Microsoft Internet Explorer')
		imgList[i].addEventListener("click", showPic, false);
	else
		imgList[i].onclick=showPic;
}
}
function showPic()
{
var img=event.srcElement.src;
window.open(img,"");
}

</script>

 

Min tanke med class-attributet vara annars att du loopar igenom alla bilder via getElementsByTagName och bara väljer ut de som har ex. img.className='tumnagel'

[inlägget ändrat 2009-04-29 13:49:16 av Anjuna Moon]

[Anjuna Moon]

Sorry, föregående kod var inte anpassad för Firefox. Här kommer revision:

 

<script language="JavaScript">
window.onload=function() {
var imgList=document.getElementsByTagName('IMG');
for(var i=0;i<imgList.length;i++)
{
	if(navigator.appName != 'Microsoft Internet Explorer')
		imgList[i].addEventListener("click", showPic, false);
	else
		imgList[i].onclick=showPic;
}
}
function showPic(e)
{
var img = (e)? e.target.src : event.srcElement.src;
window.open(img,"");
}

</script>

 

[rumbleinthejungles]

Direkt i vanlig mapp.

 

[rumbleinthejungles]

Tack för all svar. De är alla lika komplicerade för en glad amatör som vill lära sig lite nytt. :-) Jag har försökt tänka lite själv och skrivit följande:

 

 

<script type="text/javascript">

window.onload=function(){

 

var bilder = document.getElementsByTagName('img');

var antal_bilder = bilder.length;

for(var i=0;i<antal_bilder;i++)

{

bilder.onclick = function() {

document.write(bilder);

}

}

 

}

</script>

 

Givetvis fungerar det inte, men det kanske är en bra början? Jag möts av felmeddelandet "undefined".

 

[Anjuna Moon]

Givetvis fungerar det inte, men det kanske är en bra början? Jag möts av felmeddelandet "undefined".

Har du testat mitt senaste förslag? Om du inte behärskar javascript själv är det ju onödigt att försöka skriva om ett fungerande kodexempel

 

[inlägget ändrat 2009-04-29 19:32:46 av Anjuna Moon]

[rumbleinthejungles]

Nja, jag måste kunna argumentera för saken, annars blir det fusk...

 

[Jonas__B]

document.write använder du; varför? det låter konstigt.

Ev meddelande får du skriva ut inuti ett annat element

eventhandlers är annars trevliga

 

<script type="text/javascript">
window.onload=function(){

var bilder = document.getElementsByTagName('img');
var antal_bilder = bilder.length;
for(var i=0;i<antal_bilder;i++) 
{
bilder[i].addEventListener('click',doSomething,false);
}

function doSomething() {
this.style.border= 'medium solid red';
}
}
</script>

 

[rumbleinthejungles]

Hmmm... Finns det en metod (det är klart att det finns...) med vars hjälp man kan öppna en bild i en mapp genom att klicka på en annan bild som kanske ligger någon annanstans? Här är bilden:

 

<img src="bilder/liv1.jpg" name="liten_liv" alt="lt" onclick="javascript:stor_bild();" />

 

Detta fungerar:

 

<script type="text/javascript">

function stor_bild()

{

 

window.location= "bilder/" + "stor_" + "liv.jpg";

}

</script>

 

Detta öppnar rätt bild. Antag nu att jag vill ersätta liv.jpg i javascriptet med kod som hämtar denna information dynamiskt, så jag slipper hårdkoda det i skriptet...

Alltså: när jag klickar på liten_liv anropas funktionen stor_bild(). Den kikar i mappen bilder efter en bild vars namn inleds med stor_ och avslutas med liv.jpg. Hur får jag skriptet att hitta det sistnämnda utan att hårdkoda det??

[inlägget ändrat 2009-04-30 11:10:28 av rumbleinthejungles]

[Anjuna Moon]

Antag nu att jag vill ersätta liv.jpg i javascriptet med kod som hämtar denna information dynamiskt,

Var vill du hämta denna information från? Från den lilla bildens namn? Följer namnsättningen isåfall alltid samma mönster som i ditt exempel, dvs.:

bilder/xxxx1.jpg -> bilder/stor_xxxx.jpg