Just nu i M3-nätverket
Gå till innehåll
rumbleinthejungles

Samma funktion för olika bilder

Rekommendera Poster

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]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
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.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
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.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
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]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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>

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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".

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
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]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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>

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
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

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...