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

Hjälp med ett Javascript


Napoli

Rekommendera Poster

Hejsan!

 

Håller på med en hemsida och skulle behöva hjälp med ett javascript till den, har googlat i flera timmar men hittar inte det jag söker..

 

Jag är ute efter följande.

 

Jag skall ha ett bildgalleri som visar två bilder samtidigt. Det skall fungera ungefär som ett bläddringsbart fotoalbum, och varje gång man klickar så skall det bli som en bläddring i albumet.

 

Alltså när klickar på en av bilderna så skall båda ändras. Och beroende på om man klickar på höger eller vänster bild så kommer man framåt eller bakåt i albumet.

 

jag vill även att man skall kunna ha länkar som skickar en direkt till en specifik sida i albumet. utan att man behöver bläddra igenom allt.

 

 

Är oerhört tacksam för all hjälp jag kan få!!

 

tack på förhand!

 

Länk till kommentar
Dela på andra webbplatser

Vanlig fråga i detta forum och jag har gett ett antal lösningar genom åren här. Börja med att titta på en av dessa trådar och se om den leder dig på rätt väg. Återkom annars med följdfrågor så får du säkert hjälp av jonas_bo eller micke.

//eforum.idg.se/viewmsg.asp?EntriesId=1072613#1072623

 

 

Länk till kommentar
Dela på andra webbplatser

tack för ditt snabba svar, dock, så fick jag tyvärr inte det att fungera med det scriptet...

 

Vet inte hur jag får den att byta två bilder samtidigt, samt att det även finns en funktion som kan skicka en till en specifik sida via en länk..

 

 

 

Länk till kommentar
Dela på andra webbplatser

Jo, jag förstod att det inte skulle lösa problemet total, bara leda dig på rätt väg. Men om du inte har någon kunskap om Javascript så är jag säker på att du såsmåningom får hjälp av tidigare nämnda personer. Själv sitter jag tyvärr rätt stressigt till för tillfälletmen har du inte fått hjälp till helgen så hjälper jag dig då.

 

Länk till kommentar
Dela på andra webbplatser

mm. det var på rätt väg, om någon kan hjälpa mig med hur man gör för att hoppa fram till en specifik sida. så kanske jag kan försöka få ihop det själv.

 

tack på förhand

 

 

 

 

 

Länk till kommentar
Dela på andra webbplatser

jag förstår inte vad du menar med "hoppa till specifik sida"

menar du att man listar det som representerar uppslag i en bok och att klickar man på ett sidnummer så kommer man till ett uppslag flera "sidor" bort och och inte bara nästa uppslag?!

 

det borde inte vara några problem.

Fyll i arrayen med bild (och bildtext om du skall ha det)

Du får använda "bild1" resp "bild2" i bildernas ID.

bildtexterna kan isf heta "bildtext1" resp "bildtext2"

 

funktionerna för nästa och föregående får öka/minska med 2, den högra bilden har ett index som är 1 mer än den vänstra.

 

För att skriva ut sidnumrerna, gör en loop som du får öka med 1 vid initieringen men öka med ytterligare ett efter det att du ändrat den vänstra bilden.

 

 

Om du inte förstår ett dugg vad jag menar då är det lite svårt att hjälpa dig. Att göra allt åt dig är inte så kul och du lär dig ingenting.

 

Lycka till!

 

 

 

Länk till kommentar
Dela på andra webbplatser

jag förstår inte vad du menar med "hoppa till specifik sida"

menar du att man listar det som representerar uppslag i en bok och att klickar man på ett sidnummer så kommer man till ett uppslag flera "sidor" bort och och inte bara nästa uppslag?!

 

 

Jo jag tror att du förstått mig rätt, istället för att gå till nästa uppslag så skall man kanske kunna klicka på en länk som tar en direkt till t.ex.sidan 35-36.

Men som standard så skall den alltid bara byta ett uppslag (när man klickar på sidan)

 

 

Förstår nog lite av det du skrev skall försöka puzzla lite med det nu, men du beskrev aldrig hur man gör det där hoppet som jag beskrev här ovanför va?

 

 

tack för hjälpen

 

 

[inlägget ändrat 2009-01-16 22:07:28 av Napoli]

Länk till kommentar
Dela på andra webbplatser

jo då det gjorde jag:

För att skriva ut sidnumrerna, gör en loop som du får öka med 1 vid initieringen men öka med ytterligare ett efter det att du ändrat den vänstra bilden.

 

Länk till kommentar
Dela på andra webbplatser

Har suttit och försökt i flera timmar nu men får det tyvärr inte att fungera, finns det någon sida eller liknande som beskriver denna typen av javascript så att man kan lära sig?

 

Länk till kommentar
Dela på andra webbplatser

 

Så här ser det ut nu:

http://w1.302.telia.com/~u30211966/

 

Jag har lyckats få det så att det går framåt när jag klickar på högra bilden och bakåt när jag klickar på vänstra bilden,

det jag inte får och fungera är att båda bilderna skall ändras, nu är det bara den vänstra som ändras..

 

 

Här är koden:

 

<script type="text/javascript">
arrBilder = new Array("images/sid1.gif","images/sid3.gif","images/sid5.gif");
nrBild = 0;
bildCt = arrBilder.length - 1;

function bildbyte(riktning) {
  nrBild = nrBild + riktning;
  if (nrBild > bildCt) {
   nrBild = 0;
  }
  if (nrBild < 0) {
   nrBild = bildCt;
  }
  document.getElementById("bildbyte").src = arrBilder[nrBild];
}
</script>

</head>

<body onload="Init();">
<div id="ImgTxt"></div>
<a href="javascript:bildbyte(-1);void(0);"><img src="images/sid1.gif" name="bildbyte" border="0" id="bildbyte"></a> <a href="javascript:bildbyte(1);void(0);"><img src="images/sid2.gif" name="bildbyte" border="0" id="bildbyte"></a></a>

</body>

 

 

 

[inlägget ändrat 2009-01-18 13:27:43 av Napoli]

[inlägget ändrat 2009-01-18 13:28:25 av Napoli]

Länk till kommentar
Dela på andra webbplatser

1. Du har samma Id på båda bilderna - ajja bajja.

id måste vara unikt.

 

2. Skall du bara ha tre bilder? Förlåt, men det verkar lite meningslöst med din funktion då. (jag har lagt till några bilder i exemplet.

 

3. Du har en avslutande a-tagg för mycket.

 

4. <body onload=init gör absolut ingenting som det är nu.

 

Här får du en lösning serverat på silverfat (jag har tagit bort lite "onödiga" element)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title> new document </title>
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta name="keywords" content="" />
 <meta name="description" content="" /> 
 <script type="text/javascript">
my_images = new Array("images/sid1.gif","images/sid2.gif","images/sid3.gif","images/sid4.gif","images/sid5.gif","images/sid6.gif","images/sid7.gif");
var null_image="images/finnsinte.gif" //bild som visas när en sida inte finns (t ex om du har 7 sidor)
var imagestate=0;
var image_count = my_images.length-1;

window.onload = function(){
	document.getElementById("imagestate").value = imagestate;
	document.getElementById("bildbyte1").onclick = function(){ image_switch(-2) }
	document.getElementById("bildbyte2").onclick = function(){ image_switch(2) }
	image_switch(0);
}

function image_switch(by_num){
	if((imagestate+by_num)>image_count||(imagestate+by_num)<0) return false;		
	var s = imagestate + by_num;
	set_state(s);
	document.getElementById("bildbyte1").src= my_images[s];
	if (my_images[(s+1)]!=undefined){
	document.getElementById("bildbyte2").src= my_images[(s+1)];
	}else{
	document.getElementById("bildbyte2").src= null_image;
	}
	document.getElementById("imagestate").value = s;
}
function set_state(setTo){
	imagestate=setTo;
}
</script>
</head>

<body>

<img src="images/sid1.gif" name="bildbyte" border="0" id="bildbyte1">
<img src="images/sid2.gif" name="bildbyte" border="0" id="bildbyte2">
<input type="text" id="imagestate"/>
</body>
</html>

 

[inlägget ändrat 2009-01-18 18:29:06 av Jonas_Bo]

Länk till kommentar
Dela på andra webbplatser

Tack så oerhört mycket för koden.

 

Japp jag skall ha betydligt fler än 3 bilder.

 

Är det något jag skall fylla i koden för att få den att fungera? Testade att kopiera in den rakt av med det fungerade inte.

 

Misstänker att jag kanske behöver länka de bilderna som är inom body tagen till scriptet?

 

Och kanske sätta id: bildbyte1 och bildbyte2 på bilderna?

 

så här ser det ut nu, med koden du gav mig:

http://w1.302.telia.com/~u30211966/

 

[inlägget ändrat 2009-01-18 22:00:01 av Napoli]

Länk till kommentar
Dela på andra webbplatser

Raden direkt under följande rad ska vara på samma rad, nu verkar den vara radbryten.

function image_switch(by_num){

 

Efter att läst tråden lite mer så hade du väl även tänkt ha länkar för att direkt komma till rätt bild, eller?

Då blir det lite mer jobb för Jonas... ;)

 

[inlägget ändrat 2009-01-18 22:44:15 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser

http://rafb.net/p/Cyvmi743.html

Edit : Nu j***ar är det helt komplett.

 

Det kom med lite radbrytningar innan som inte skulle vara där.

Jag har lagt till funktionalitet för avsnittval.

 

Cheers

 

 

 

Edit2: jag kanske skulle jobba istället för att hjälpa till. Tror att min arbetsgivare skulle uppskatta det :P

[inlägget ändrat 2009-01-19 09:17:01 av Jonas_Bo]

Länk till kommentar
Dela på andra webbplatser

Tackar så hemskt mycket för all hjälp jag har fått!!!

 

Måste tyvärr ställa en fråga till..

 

Om jag bara vill ha 4 specifika länkar istället för att varje sid-par visas som en specifik länk, är det svårt att ordna? Var jäkligt otydligt förut..ber om ursäkt för det..

 

så här är tanken att det skall bli: http://w1.302.telia.com/~u30211966/

 

 

tack ännu en gång.

 

 

Länk till kommentar
Dela på andra webbplatser

Om det skall vara statiskt kan du bortkommentera sidbläddringen

// render_paging(); // genererar sidbläddringen

och så kan du själv lägga in länkarna

 

<a href="javascript:void(goto_image(0));">sommar</a> | 
<a href="javascript:void(goto_image(2));">vinter</a> | 
<a href="javascript:void(goto_image(4));">var</a> | 
<a href="javascript:void(goto_image(6));">host</a> 

 

siffrorna i goto_image hänvisar till indexet där noll representerar sida 1 & 2,

index 2 representerar sida 3 & 4 osv.

således skall du använda goto_image(10) när du skall till sida 11 & 12,

 

DOCK tycker jag inte du skall kunna gå till 22-23 då vänstersidan skall vara ett udda nummer och det kan bli knasigt om du frångår så som det är uppbyggt, men visst går det att gå till 22-23 genom att använda index 21

[inlägget ändrat 2009-01-19 17:03:50 av Jonas_Bo]

Länk till kommentar
Dela på andra webbplatser

ooh.. grymt att det finns människor som dig, tack ännu en gång

 

nu tror jag allting fungerar, som det skall.. sidan kommer bli grymt

kan posta sidan här när allt är klart!

 

 

 

Länk till kommentar
Dela på andra webbplatser

  • 1 month later...

Måste tyvärr väcka liv i den här tråden igen. Är nu helt färdig med min sida och skulle lägga in scriptet (som jag sparat ner på min dator redan.)

 

Men hade glömt att skriva ner hur man gjorde för att aktivera bilderna som skall använda sig av scriptet. Vi snackar alltså koden inom body-tagen nu.

 

Har för mig att det var något i stil med javascript:goto:bildbyte 1 eller liknande.

 

Tacksam för svar! Skulle var så otroligt segt om det sket sig nu, har lagt ner oändligt med tid på denna sidan..

 

:thumbsup:

 

Länk till kommentar
Dela på andra webbplatser

Aktiveringen sker automatiskt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta name="keywords" content="" />
 <meta name="description" content="" /> 
 <style type="text/css">
body {font: normal normal 1em/1.4 "Helvetica Neue", Helvetica, Arial, Sans-serif ; text-align:center;}
p {font-size: .8em;}
#paging {width:470px; }
a{color:#c00; text-decoration:none;}
a:active{color: #000;outline:none;}
a:hover{text-decoration:underline;}
a img, img {border:0;}
 </style>
 <script type="text/javascript">
my_images = new Array("images/sid1.gif","images/sid2.gif","images/sid3.gif","images/sid4.gif","images/sid5.gif","images/sid6.gif","images/sid7.gif");
my_images_alt = new Array("Min första bild ","Andra bilden","Den tredje","Fjärde","På det femte smäller det","Jag gillar sex","Den sista");
var null_image="images/finnsinte.gif"; // bild som visas när en sida inte finns (t ex om du har 7 sidor)
var null_image_alt="Bilden hittades inte.";
var imagestate=0;
var image_count = my_images.length-1;

window.onload = function(){
	document.getElementById("bildbyte1").onclick = function(){ image_switch(-2) }
	document.getElementById("bildbyte2").onclick = function(){ image_switch(2) }
	image_switch(0); // visar första uppslaget vid start
	render_paging(); // genererar sidbläddringen
}

function image_switch(by_num){
	if((imagestate+by_num)>image_count||(imagestate+by_num)<0) return false;		
	var s = imagestate + by_num;
	goto_image(s);
}
function goto_image(s){
	set_state(s);
	document.getElementById("bildbyte1").src= my_images[s];
	document.getElementById("bildbyte1").alt= my_images_alt[s];
	if (my_images[(s+1)]!=undefined){
	document.getElementById("bildbyte2").src= my_images[(s+1)];
	document.getElementById("bildbyte2").alt= my_images_alt[(s+1)];
	}else{ document.getElementById("bildbyte2").src= null_image;
	document.getElementById("bildbyte2").alt= null_image_alt;
	}return false;
}
function set_state(setTo){
	imagestate=setTo;
}
function render_paging(){
	var p = document.getElementById("paging");
	p.innerHTML += "Uppslag: <br/>";
	for (i=1;i<=(my_images.length);i++)		{
		var a = document.createElement("a");
		a.setAttribute("href", "javascript:void(goto_image(" + (i-1) + "));");
		a.innerHTML = "["+ (i);
		if (i<=my_images.length-1) a.innerHTML += "-"+ (i+1);
		a.innerHTML += "]";
		p.appendChild(a);
		if (i<my_images.length) p.innerHTML += "  ";			
		i++;
	}
}
</script>
</head>
<body>
<img src="images/sid1.gif" id="bildbyte1"/>
<img src="images/sid2.gif" id="bildbyte2"/>
<p id="paging"></p>
</body>
</html>

 

Här är den sida jag hade lokalt, men behöver ev ändras men överlåter det till dig.

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...