Antworten auf deine Fragen:
Neues Thema erstellen

Bildergalier in Website

M

mrssaxobeat

Noch nicht viel geschrieben

Hallo ich bin ziemlich neu im Bereich Webdesigne. Habe mir jetzt eine Hompage mittels Photoshop Layout gemacht und in Dreamweaver weitergearbeitet es funktioniert alles wirklich super, so wie ich es will.
nur gibt es ein Problem. ich möchte eine Bildergalerie erstellen die hald dann in meiner hompage unter der registerkarte fotos zu sehen ist. hab es schon mit lightbox versucht und mir die webgalerie für photoshop runtergeladen nur funktioniert das alles nicht bzw bin ich einfach zu dumm dafür :hmpf: drum will ich fragen ob man vielleicht eine Bildergalerie ohne dem erstellen kann und auch ohne diesen Fireworks oder wied das heißt, denn das habe ich nicht..

kann mir hier wer weiterhelfen - bin schon sehr am verzweifeln
 

sokie

sokie

Mod | Web

AW: Bildergalier in Website

alle Dinge, die mit html/css/javascript zu tun haben, lassen sich grundsätzlich mit jedem texteditor machen. Dafür braucht man keine spezielle teure Software.
die Erstellung einer anklickbaren Bildgalerie erfolgt im prinzip immer im selben Muster:
ein link <a href="...> verweist auf das anzuzeigende grosse Bild, eine Vorschau (thumbnail) wird diesem link als bild zugewiesen:
HTML: 
<a href="pfadZumBild.jpg"><img src="thumbnail.jpg" alt="beschreibender text" /></a>
das ganze kann in eine Liste eingebunden werden, und dann per css gestyled werden, und per javascript jedwede Funktionalität bekommen. und das allesohne irgendwelchen weiteren Programme.
Wenn Du ohne grossen Wiggel alles so haben willst, wie Du Dir das vorstellst, kommst du an den Basics (html/css) erstmal nicht vorbei.

ps: mit der code Ansicht vom Dreamweaver hast du einen guten Editor ja bereits zur Hand.
 
MrSpock

MrSpock

Admiral

AW: Bildergalier in Website

Wie weit bist Du denn mit Deinen lightbox-Versuchen gekommen? Im Grunde ist das doch einfach, wenn Du Dich daran hälst, was sokie bereits schrieb. Zusätzlich musst Du nur noch das rel-Attribut einbinden, das ist eigentlich alles. Naja, und natürlich die Scripte, aber daran wirst Du ja wohl gedacht haben ...
 
Zuletzt bearbeitet:
cebito

cebito

undefined

AW: Bildergalier in Website

mrssaxobeat schrieb:
nur hab ich anscheinend doch irgendwas falsch gemacht weils ned funktioniert
Zum Vergrößern anklicken....
Nur können wir dir nicht helfen es richtig zu machen, da wir nicht sehen können was du falsch gemacht hast. Am besten, du stellst es mal auf deinem Webspace (oder bei einem Freehoster) online, dann kann man dir auch helfen. Der Link zur Lightbox nutzt nichts, dort funktionierts ja ;)
Klick mal die rote Zeile in meiner Signatur...
 
M

mrssaxobeat

Noch nicht viel geschrieben

AW: Bildergalier in Website

also so sieht die code ansicht aus - ich hab das alles eingefügt aba es tut sich einfach garnix

HTML: 
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<title>Unbenannt-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
 background-image: url(../Website%201/images/back.jpg);
 background-repeat: no-repeat;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
body,td,th {
 font-family: "Comic Sans MS", cursive;
 font-size: 14px;
 color: #000;
}
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }   
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}   
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
<a href="http://www.psd-tutorials.de/forum/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="http://www.psd-tutorials.de/forum/images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="http://www.psd-tutorials.de/forum/images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="http://www.psd-tutorials.de/forum/images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('../Website 1/Bilder/&uuml;ber-mich_1.png','../Website 1/Bilder/fotos_1.png','../Website 1/Bilder/G&auml;stebuch_1.png','../Website 1/Bilder/home_1.png')">
<!-- Save for Web Slices (Unbenannt-1 - Slices: Header_0, Navigation_0, back, randlinks_0, randrechts_0, randunten_0) -->
<table id="Tabelle_01" width="1000" height="797" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td height="121" colspan="4">
   <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../Website 1/Bilder/über-mich_1.png',1)"><img src="../Website 1/Bilder/Header.gif" width="1024" height="121" alt=""></a></td>
 </tr>
 <tr>
  <td colspan="4"><a href="home.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','../Website 1/Bilder/home_1.png',1)"><img src="../Website 1/Bilder/home_0.png" name="Image8" width="228" height="55" border="0"></a><a href="uber mich.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','../Website 1/Bilder/über-mich_1.png',1)"><img src="../Website 1/Bilder/über-mich_0.png" name="Image9" width="239" height="57" border="0"></a><a href="fotos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','../Website 1/Bilder/fotos_1.png',1)"><img src="../Website 1/Bilder/fotos_0.png" name="Image6" width="189" height="57" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','../Website 1/Bilder/Gästebuch_1.png',1)"><img src="../Website 1/Bilder/Gästebuch_0.png" name="Image7" width="368" height="55" border="0"></a></td>
 </tr>
 <tr>
  <td width="5">&nbsp;</td>
   <td width="1">
   <img src="http://www.psd-tutorials.de/forum/images/back.jpg" width="1" height="399" alt=""></td>
  <td width="1016" height="593"><table width="700" border="0" align="center">
    <tr>
      <td align="center" valign="middle"><p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p></td>
       </tr>
     </table></td>
  <td width="6">&nbsp;</td>
 </tr>
 <tr>
  <td colspan="4">&nbsp;</td>
 </tr>
</table>
<p><!-- End Save for Web Slices --></p>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
cebito

cebito

undefined

AW: Bildergalier in Website

Deine Links haben oben im style nichts zu suchen, die gehören an die von dir bestimmte Stelle irgendwo zwischen <body> und </body>

PS. - Der DW-erzeugte Code ist das reinste Grauen...
 
MrSpock

MrSpock

Admiral

AW: Bildergalier in Website

Was für eine DW-Version ist das denn? Wie kommt das Zeug ab
Code: 
[COLOR=#800000]<script type=[COLOR=#0000FF]"text/javascript"[/COLOR]>
[/COLOR] function MM_swapImgRestore() { //v3.0
dort hinein?
 
MrSpock

MrSpock

Admiral

AW: Bildergalier in Website

Dann hast Du ein Bedienproblem!
Dein Inhalt hat - wie bereits oben gesagt - nichts im Body-Bereich zu suchen, schon gar nicht innerhalb einer Script-Umgebung. Wie der dort bei Dir hinein gekommen ist, ist mir schleierhaft.

So sollte es aussehen und funktionieren:
Code: 
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<title>Unbenannt-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
 background-image: url(../Website%201/images/back.jpg);
 background-repeat: no-repeat;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
body,td,th {
 font-family: "Comic Sans MS", cursive;
 font-size: 14px;
 color: #000;
}
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }   
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}   
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('../Website 1/Bilder/&uuml;ber-mich_1.png','../Website 1/Bilder/fotos_1.png','../Website 1/Bilder/G&auml;stebuch_1.png','../Website 1/Bilder/home_1.png')">
<!-- Save for Web Slices (Unbenannt-1 - Slices: Header_0, Navigation_0, back, randlinks_0, randrechts_0, randunten_0) -->
<table id="Tabelle_01" width="1000" height="797" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td height="121" colspan="4">
   <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../Website 1/Bilder/über-mich_1.png',1)"><img src="../Website 1/Bilder/Header.gif" width="1024" height="121" alt=""></a></td>
 </tr>
 <tr>
  <td colspan="4"><a href="home.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','../Website 1/Bilder/home_1.png',1)"><img src="../Website 1/Bilder/home_0.png" name="Image8" width="228" height="55" border="0"></a><a href="uber mich.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','../Website 1/Bilder/über-mich_1.png',1)"><img src="../Website 1/Bilder/über-mich_0.png" name="Image9" width="239" height="57" border="0"></a><a href="fotos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','../Website 1/Bilder/fotos_1.png',1)"><img src="../Website 1/Bilder/fotos_0.png" name="Image6" width="189" height="57" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','../Website 1/Bilder/Gästebuch_1.png',1)"><img src="../Website 1/Bilder/Gästebuch_0.png" name="Image7" width="368" height="55" border="0"></a></td>
 </tr>
 <tr>
  <td width="5">&nbsp;</td>
   <td width="1">
   <img src="http://www.psd-tutorials.de/forum/images/back.jpg" width="1" height="399" alt=""></td>
  <td width="1016" height="593"><table width="700" border="0" align="center">
    <tr>
      <td align="center" valign="middle">
      <a href="http://www.psd-tutorials.de/forum/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="http://www.psd-tutorials.de/forum/images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="http://www.psd-tutorials.de/forum/images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="http://www.psd-tutorials.de/forum/images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
      </td>
       </tr>
     </table></td>
  <td width="6">&nbsp;</td>
 </tr>
 <tr>
  <td colspan="4">&nbsp;</td>
 </tr>
</table>
<p><!-- End Save for Web Slices --></p>
</body>
</html>
Naja, zumindest zeigt sich jetzt schon mal die lightbox ;-)
 
Zuletzt bearbeitet:
cebito

cebito

undefined

AW: Bildergalier in Website

mrssaxobeat schrieb:
aber sobald ichs in den body schreibe, schreibt mir dw das ganz oben, das is doch alles käse :/
Zum Vergrößern anklicken....
Das liegt daran, das DW die Bilder als Bilder und nicht als Hintergrundbilder einfügt. Das ist ein riesenweiter Unterschied. Ohne grundlegende Kenntnisse kommst du hier nicht weiter. Du hast drei Möglichkeiten:

  1. lerne HTML und CSS
  2. lasse jemand anderen die Seite für dich machen
  3. lass das Projekt fahren...

MrSpock schrieb:
Was für eine DW-Version ist das denn? Wie kommt das Zeug ab
Code: 
[COLOR=#800000]<script type=[COLOR=#0000FF]"text/javascript"[/COLOR]>
[/COLOR] function MM_swapImgRestore() { //v3.0
dort hinein?
Zum Vergrößern anklicken....

Das macht DW, wenn du in PS Hovereffeckte festlegst und es dann speichern lässt. Genau derselbe Mistcode wie noch zu PS7 und ImageReady-Zeiten.

@mrssaxobeat - das ließe sich alles einfacher und ohne JS realisieren, wenn man denn Grundkenntnisse erwirbt... bissl Literatur:

http://little-boxes.de/little-boxes-teil1-online.html
http://jendryschik.de/wsdev/einfuehrung/
 
M

mrssaxobeat

Noch nicht viel geschrieben

AW: Bildergalier in Website

ja sorry ich sag ja ich bin neu in dem Gebiet und ich will das mal selber versuchen.. jeder fangt mal mit was an..!!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 113 (Mitglieder: 6, Gäste: 107)
Robots: 332

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben