JavaScript-basierte Bildergalerie @ tutorials.de: Tutorials, Forum & Hilfe

-GS-Master · 04.09.06 15:14

Also hab sowas schon öffters gesehen und glaube es hat mit php oder JavaScript zu tun ... weiß es leider nicht genau.
So jetzt fang ich mal an

wisst ihr wo ich ein tutorial herbekomme, das mir erklärt wie ich es schaffe dass ich laute "miniatur" bilder habe sagenw wir mal z.b 5 und dafür ist ein großes.

Wenni ich jetzt eines der "miniatur" Bilder drücke, erscheint es oben in dem großen bild ... also je nach dem welches bild ich drücke ...

Maik · 04.09.06 16:31

Stellst Du Dir das eventuell so vor?

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<script type="text/javascript">
<!--
// Image-Preloader
image1 = new Image();
image1.src = "pic01.jpg";
image2 = new Image();
image2.src = "pic02.jpg";
image3 = new Image();
image3.src = "pic03.jpg";
image4 = new Image();
image4.src = "pic04.jpg";
image5 = new Image();
image5.src = "pic05.jpg";

// swapImage
function swapImage(imgName,swapImg)
{
document.images[imgName].src=swapImg;
}
//-->
</script>

<style type="text/css">
<!--
ul {
margin: 10px 0 0 0;
padding: 0;
}

li {
display: inline;
margin: 0 5px 0 0;
}

a img {
border: 0;
}
-->
</style>

</head>
<body>

<div id="imageBox">
   <img src="pic00.jpg" alt="" name="start">
</div>

<ul>
    <li><a href="#" onclick="swapImage('start','pic01.jpg')"><img src="pic01_th.jpg" alt="load pic01"></a></li>
    <li><a href="#" onclick="swapImage('start','pic02.jpg')"><img src="pic02_th.jpg" alt="load pic02"></a></li>
    <li><a href="#" onclick="swapImage('start','pic03.jpg')"><img src="pic03_th.jpg" alt="load pic03"></a></li>
    <li><a href="#" onclick="swapImage('start','pic04.jpg')"><img src="pic04_th.jpg" alt="load pic04"></a></li>
    <li><a href="#" onclick="swapImage('start','pic05.jpg')"><img src="pic05_th.jpg" alt="load pic05"></a></li>
</ul>

</body>
</html>

-GS-Master · 05.09.06 13:11

ja danke genau sowas hab ich gemeint

romolus · 02.10.06 20:21

Hi zusammen

Ich hoffe ihr könnt mir helfen, also ich habe dieses Bildergalerie Script hier verwendet und es läuft alles perfekt..

Aber ich möchte dass ich zu jedem Bild unten einen Kommentar hinschreiben kann und dieser dann, wenn das Bild vergrössert wird, unter dem Bild gezeigt wird..was müsste ich da noch hinzufügen

thanks

mfg

**Quaese** · 03.10.06 13:11

Hi,

versuchs mal so:

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
 
<script type="text/javascript">
<!--
// Image-Preloader
var arrImg = new Array();
arrImg[0] = new Image();
arrImg[0].src = "../bilder/fussball.jpg";  // Pfad zum Bild
arrImg[0].txt = "Fussball 0";              // Gewünschter Text
arrImg[1] = new Image();
arrImg[1].src = "../bilder/fussball1.jpg";
arrImg[1].txt = "Fussball 1";
arrImg[2] = new Image();
arrImg[2].src = "../bilder/fussball2.jpg";
arrImg[2].txt = "Fussball 2";
arrImg[3] = new Image();
arrImg[3].src = "../bilder/fussball3.jpg";
arrImg[3].txt = "Fussball 3";
arrImg[4] = new Image();
arrImg[4].src = "../bilder/fussball4.jpg";
arrImg[4].txt = "Fussball 4";
 
// swapImage
function swapImage(imgName, intImg){
  document.getElementById(imgName+"_imgID").src = arrImg[intImg].src;
  document.getElementById(imgName+"_outID").innerHTML = arrImg[intImg].txt;
 
  return false;
}
//-->
</script>
 
<style type="text/css">
<!--
ul {
margin: 10px 0 0 0;
padding: 0;
}
 
li {
display: inline;
margin: 0 5px 0 0;
}
 
img {
border: 0;
}
-->
</style>
 
</head>
<body>
 
<div id="imageBox">
  <img src="../bilder/fussball.jpg" alt="" id="start_imgID">
  <div id="start_outID">Fussball 0</div>
</div>
 
<ul>
  <li><a href="#" onclick="return swapImage('start', 0);"><img src="../bilder/fussball.jpg" alt="load pic01"></a></li>
  <li><a href="#" onclick="return swapImage('start', 1);"><img src="../bilder/fussball1.jpg" alt="load pic02"></a></li>
  <li><a href="#" onclick="return swapImage('start', 2);"><img src="../bilder/fussball2.jpg" alt="load pic03"></a></li>
  <li><a href="#" onclick="return swapImage('start', 3);"><img src="../bilder/fussball3.jpg" alt="load pic04"></a></li>
  <li><a href="#" onclick="return swapImage('start', 4);"><img src="../bilder/fussball4.jpg" alt="load pic05"></a></li>
</ul>
 
</body>
</html>

Ciao
Quaese

romolus · 03.10.06 17:33

Hi,

Super es perfekt!!

Vielen Dank für die schnelle Hilfe!

mfg

uwerotfheld · 11.04.07 11:29

Hallo zusammen,

ich habe hier im Forum die Anleitung zu einer einfachen js Bildergalerie gefunden ( http://www.tutorials.de/forum/javasc...ergalerie.html ). Diese funktioniert im Prinzip auch hervorragend, nur der FireFox macht Probleme. Ich habe die untere Variante umgesetzt, mit dem Kommentaren zu den Bildern und erhalte dabei im FF folgenden Fehler:

Fehler: document.getElementById(imgName + "_imgID") has no properties ...

Im IE und Opera arbeitet es aber hervoragend. Jemand ne Idee was das sein könnte?

Danke schonmal.

hans jörg · 11.04.07 11:37

hi,
entferne bitte mal die ")" am Ende deines Links, sonst wird sichs niemand ansehn können. Vielleicht hast du auch einen Link zu deinem eigenen Beispiel, das würde die Hilfe vermutlich auch erleichtern.

Maik · 11.04.07 11:42

Hi!

Ich war mal so frei, deinen neu erstellten Thread hier unterzubringen, da du dich ja auf Quaeses Beispiel beziehst.

@Topic: Kann es sein, dass du der Startgrafik nicht die ID zugewiesen hast?

Code :

<div id="imageBox">
  <img src="../bilder/fussball.jpg" alt="" [b]id="start_imgID"[/b]>
  <div id="start_outID">Fussball 0</div>
</div>

Ansonsten solltest du mal deinen Quellcode zeigen.

uwerotfheld · 11.04.07 11:49

Hallo,

vielen Dank. Das wars. Kleiner Rechtschreibfehler, wie peinlich ...

Ich danke für die schnelle Hilfe

Ihr seit echt gut hier. Konnte schon viel lernen. Danke!!

Maik · 11.04.07 11:52

Tausch mal das name-Attribut gegen das id-Attribut.

Aus

Code :

1	<img src="img/2007_1.jpg" width="370" height="272" alt="" [color=red]name[/color]="start_imgID">

wird

Code :

1	<img src="img/2007_1.jpg" width="370" height="272" alt="" [b]id[/b]="start_imgID">

uwerotfheld · 11.04.07 12:00

ha,

da hat sich was überlappt.

danke nochmals.

Marcel_S · 03.05.07 22:03

Hallo!

Ich habe ein kleines Problem mit dem JavaScript ganz am Anfang. Ich habe damit ein paar Bilder eingefügt. Lokal funktioniert alles wunderbar, klicke ich auf ein kleines Bild erscheint oben das grosse Exemplar.

Nun habe ich das ganze hochgeladen und wollte es anschauen, doch online sind keine kleinen Bilder zu sehen, da steht nur "load pic01 load pic02 ...."
Was ist hier schief gegangen? Ich habe ganz sicher alle nötigen Dateien mit hochgeladen.

Wäre schön wenn mir jemand helfen könnte.

mfG Marcel

Maik · 03.05.07 22:06

Hi,

stimmen auch die Grafikpfade überein?

Ansonsten poste mal den Link zur Seite, damit man da einen Blick drauf werfen kann.

Marcel_S · 04.05.07 18:00

"stimmen auch die Grafikpfade überein?"

Ich habe gerade nachgeschaut und entdeckt, das ich bei den Grafikpfade nicht auf Gross- und Kleinschreibung geachtet habe. Ich weiss, sollte zu meiner Erleichterung immer alles klein schreiben

. Aber dass es Lokal funktionierte und Online nicht

Auf jeden Fall danke für die Hilfe!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

JavaScript-basierte Bildergalerie

Javascript-basierte Bildergalerie

Simple Javascript Bildergalerie gesucht

bildergalerie mit javascript?

bildergalerie mit javascript

E-Mail:

Abonnieren Abbestellen