Bildergalerie mit CSS oder iframe

mattis_1

Hallo Leute ich möchte mir gerne eine Bildergalerie erstellen. Steh aber jetzt vor dem Problem ob ichs mit CSS (http://www.cssplay.co.uk/menu/gallery_click#nogo) oder iframes (inetwa so:http://www.homepage-total.de/html/galerie-mit-iframes.php#) machen sollte.

Was mich an CSS stört ist das ich die Bilder (Thumbs) in der CSS datei angeben muss, somit benötige ich ja für jede Bildergalerie eine extra css-datei bzw. die vorhande wird sehr lang. Oder gibt es dafür auch eine möglichkeit, dies in der jeweiligen html-Datei anzugeben (ohne style-tag).

Haben iframes die gleichen Nachteile wie Frames bzgl. Suchmaschinen?

Könnt ihr mir Vorteile oder Nchteile der jeweiligen Variante nennen, damit mir die Entscheidung leichter fällt? Oder für was würdet ihr euch entscheiden?

Danke schon mal für euere Hilfe.

Schrippe

Ob's besser ist oder nicht, weiß ich nicht, aber ich hab meine Bildergalerie mit Frames gemacht. Ok, ich bin auch Vollamatuer, von daher reicht's mir, wenn man die Bilder sehen kann und dass sie in einem neuen Fenster vergrößert angezeigt werden, wenn man sie anklickt.

Was ist denn das für ein Nachteil bei Bildern in Frames für Suchmaschinen? Werden diese Bilder nicht gefunden?

sejuma

Die CSS-Lösung wäre mir in diesem Fall zu aufwendig.
Ich benutze für Bildergalerien das kostenlose JAlbum
Entweder setzt du einen Link zur Bildergalerie einen Link oder bindest sie per iframe ein: http://jalbum.net/tutorials/integrate-simple

mattis_1

Hi

also spricht im Prinzip nichts gegen die Verwendung von iframes.

Hab mich halt nach alternativen zu iframes umgeschaut, da ja einige Leute eine Abneigung gegen jegliche art von Frames haben. Der Link war nur ein Beispiel.

Gibt es bei der Verwendung von iframes irgendwas zubachten, damits z.B. in allen Browsern funktioniert bzw. was ich auf keinen Fall machen sollte oder so.

Danke mattis

mattis_1

Hallo Leute hab es jetzt mit iframes realisiert.

Hätte gerne noch einen Bilduntertitel, habt ihr einen Ahnung wie ich das am besten realisieren.

Hier ist mal ein Ausschnitt der HTML-Datei:

HTML

<?xml version="1.0"?>
<!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>
  </head>
  <body>
    <div id="content">
      <h3>Fahrzeugübergabe</h3>
      <div  id="scrollbox">
        <div id="thumbs">
          [url='bilder/fahrzeuguebergabe_wuestermarke/01.jpg'][img]bilder/fahrzeuguebergabe_wuestermarke/thumbs/01_t.jpg[/img][/url]
...
          [url='bilder/fahrzeuguebergabe_wuestermarke/20.jpg'][img]bilder/fahrzeuguebergabe_wuestermarke/thumbs/20_t.jpg[/img][/url]
        </div>
      </div>
      <iframe src="bilder/fahrzeuguebergabe_wuestermarke/01.jpg" name="show" width="416" height="316" frameborder="0" scrolling="no">
        <div align="center">Ihr Browser kann leider keine eingebetteten Frames anzeigen</div>
      </iframe>
    </div>


    <div id="footer_container">
      <div id="footer">
        <ul id="navigation">
          [*][url='impressum.html']Impressum[/url]
          [*][url='sitemap.html']Sitemap[/url]
          [*][url='kontakt.html']Kontak[/url]
          [*][url='index.html']Home[/url]
        [/list]
      </div>
    </div>
  </body>
</html>

Alles anzeigen

Und der CSS-Datei

Code

#scrollbox {
	width:400px;
         height:100px;
         background:#f4f4f4;
         overflow:auto;
         border:1px solid #aaa;
}


#thumbs {
	width:1800px;
         height:80px;
}


#thumbs img {
	border:0;
         width:80px;
         height:80px;
}

Alles anzeigen

Danke schonmal für die Hilfe

mattis

synaptic

spricht irgendetwas gegen die benutzung eines javascriptes?
klar, letztlich kann man nen script deaktivieren, aber wofür gibt es webtechniken, wen man sie nicht benutzt?

koslowski

Hi,

Code

Code von mattis_1:
      <?xml version="1.0"?>

äh..., gibt es einen bestimmten Grund warum du den IE6 mit dieser Zeile in den Quirksmodus schicken willst?

Wenn nicht solltest du sie besser weglassen.

koslowski

mattis_1

koslowski
also kann dir nicht sagen ob es einen bestimmten Grund für den Quirksmodus gibt.
Kann dir nur sagen das es ohnen diese erste Zeile nicht richtig funktioniert, sprich der div content wird zu breit dargestellt und der Scrollbalken ist nicht mehr sichtbar.

synaptic
Spricht nicht unbeding was gegen JavaScript, würd es nur gerne ohne realisieren wenn es möglich ist.

mattis

koslowski

Hi,

Zitat von mattis_1

koslowski
also kann dir nicht sagen ob es einen bestimmten Grund für den Quirksmodus gibt.
Kann dir nur sagen das es ohnen diese erste Zeile nicht richtig funktioniert, sprich der div content wird zu breit dargestellt und der Scrollbalken ist nicht mehr sichtbar.

synaptic
Spricht nicht unbeding was gegen JavaScript, würd es nur gerne ohne realisieren wenn es möglich ist.

mattis

dann mach den content halt schmaler und so ein iframe ist ja auch nicht das Gelbe vom Ei.
Fakt ist jedenfalls das die erste Zeile im IE6 eigentlich nur Probleme verursacht.

Ich weiss auch nicht so genau was denn an einer CSS-Lösung für eine Bildergalerie so aufwändig sein soll.
Allzuviel CSS brauchts da sicher nicht und bei den ganzen Unterseiten für die großen Bilder muss man nur den Bildtitel, den Namen der Verweisdatei und width/height der img's austauschen.
Ansonsten copy/paste.

mattis_1

Hi

die Breite für den content hab ich garnicht angegeben, da ich ja nie weiß mit welcher Auflösung der Nutzer arbeitet. Das Thema bzw. probleme mit dem stylesheet hab ich bereits hier gepostet, wenn du weiter was dazusagen möchtest dann bitte dort, da es hier nicht das Thema ist.

Da ich nicht weiß wo die Probleme hier mit iframes liegen, hab ich eigentlich diesen Thread eröffnet. Mit " das Gelbe vom Ei sind iframes aber nciht" kann ich leider nichts anfangen. Entweder gibts mir konkrete Beispiele oder ich lasse es bei iframes

Zitat

Ich weiss auch nicht so genau was denn an einer CSS-Lösung für eine Bildergalerie so aufwändig sein soll.
Allzuviel CSS brauchts da sicher nicht und bei den ganzen Unterseiten für die großen Bilder muss man nur den Bildtitel, den Namen der Verweisdatei und width/height der img's austauschen.
Ansonsten copy/paste.

Find es schon etwas aufwendiger eine CSS-Bildergalerie zuerstellen. Und für die "großen" Bilder möcht ich keine extra seite öffenen, deswegen iframes oder das css-Beispiel aus dem ersten Post. Da ich aber mehrere Bildergalerien plane, fand ich die Lösung mit der Angabe der PFade für die Bilder in der CSS-Datei nicht sehr gut, da ich ja somit für jede Galerie eine seperate CSS-Datei benötige.

Aber danke trotzdem für die Hilfe

Falls jemand (auch du koslowski) eine Lösung für das Problem mit den Bilduntertiteln hat, wäre ich sehr dankbar

Mattis

synaptic

also ich würds mit javascript realisieren, auch wenn des script etwas umfangreicher würde... leute die es deaktiviert haben bekommen über noscript ne info oder haben halt pech und gucken de galerie net an

mattis_1

hast auch einen Typ, wie ich dort am bsten ran gehe, wie nicht so recht wie ichs machen muss

synaptic

na wenn dann würd ich mit divs arbeiten statt iframes und dort dann das entsprechende bild reinladen (über da img-tag mit ner id- so brauchste nur 1 img-tag) dann gehste daher und vergibst zwei styles, einen für horizontale bilder und einen für vertikale bilder... die namen der bilder kennste ja alle, also könntest du entweder nach den namen entscheiden welcher style für das kommende bild gedacht ist.. die andere variante wäre die bilder in ein array zu packen und dann anhand des array-index diese stylevergabe durchzuführen...
unter dem img-tag machste dann nen span-tag auch mit ner id und wenn du ja eh was hast woarn du für nen style unterscheiden kannst, kannste das gleiche nutzen um nen text zu vergeben....
wie gesagt, das script an sich würd etwas größer aber es würd deinen zweck voll erfüllen...
wenn du zeit bis morgen nachmittag hast (so gegen 17:30 oder 18:00) und du bereit bist die bilder schon vorab zu "veröffentlichen" könnte ich dich unterstützen dieses script zu schreiben...
hab heut abend keine zeit mehr (bett ruft)

mattis_1

Hi

Hab es so relisier das ich den Bildtitel in das Bild einfüge. Würd mich aber interessieren die Lösung von dir bzw. würde diese vorziehen.

Bin erst wieder Sonnabend im Land. Also würde es bis dahin ausreichen, falls du lust hast und nicht ein zu großer aufwand ist.
Unter folgendem Link finds mein bisheriges Ergebnis:http://kfv-dahme-spreewald.de.vu

Danke für die Hilfe

mattis_1

Sorry Link hat irgenwie nicht funktioniert:http://kfv-dahme-spreewald.de.vu/
Dort musst unter "Aktuelles" schauen um zur Galerie zu gelangen.

synaptic

edit: habs mal so gemacht, wie ich es realisieren würde..
(fehlt nur noch das vorausladen aller bilder..)

HTML

<html>
<head>
  <title>Kreisfeuerwehrverband Dahme-Spreewald e.V.</title>
<style type="text/css">
<!--
  #wrapper{
  height:450px;
  width:410px;
  }

  #preview{
  width:410px;
  height:105px;
  overflow:hidden;
  }

  #thumbs{
  width:1400px; /*dieser wert entspricht den thumbnails und dem margin dazwischen(sollte halt grösser sein) 16*80 + 16*5 = 1360 */
  }

  #preview img{
  width:80px; 
  height:80px;
  margin-right:5px;
  }

  #show{
  height:340px;
  width:410px;
  }

  #infotext{
  width:410px;
  text-align:center;
  font-weight:500;
  font-size:16px;
  font-family:arial;
  }
-->
</style>


 <script type="text/javascript">
 var TIMER;
 function roll_left(){
 var scrolldiv= document.getElementById("thumbs");
 var leftpos = parseInt(scrolldiv.style.left);
 scrolldiv.style.left = leftpos - 2 + "px";
 TIMER = setTimeout(roll_left, 50);
 if(leftpos <= -975){clearTimeout(TIMER); roll_right();}




 
 }
 
 function roll_right(){
 var scrolldiv= document.getElementById("thumbs");
 var leftpos = parseInt(scrolldiv.style.left);
 scrolldiv.style.left = leftpos + 2 + "px";
 TIMER = setTimeout(roll_right, 50);
 if(leftpos >= 10){clearTimeout(TIMER); roll_left(); }




 }
 
 function picshow(objekt){
 var show = document.getElementById("show");
 var info = document.getElementById("infotext");
 var thumb_url = objekt.src;
 var ende = thumb_url.length-6;
 var bild_urlpart = thumb_url.substr(0, ende);
 var bild_url = bild_urlpart + ".jpg";
 show.src = bild_url;
 var id = objekt.id;
switch(id){
case "1": info.innerHTML="Delegation, die das Fahrzeug entgegennahm";
break;
case "2": info.innerHTML="Stärkung muss sein!";
break;
case "3": info.innerHTML="Eine Menge Schriftkram ist immer dabei...!";
break;
case "4": info.innerHTML="Auf Vollständigkeit muss auch alles überprüft werden!";
break;
case "5": info.innerHTML="Und ausprobiert werden muss auch alles!";
break;
case "6": info.innerHTML="Die erste Fahrt, ob das gut geht";
break;
case "7": info.innerHTML="Neue und alte Technik vereint";
break;
case "8": info.innerHTML="Für die offizielle Übergabe geschmückt!";
break;
case "9": info.innerHTML="Und hinter den Kulissen?";
break;
case "10": info.innerHTML="Reden werden bei den offiziellen Anl&auml;ssen auch gehalten!";
break;
case "11": info.innerHTML="Zahlreiche Gäste sind zum Gratulieren erschienen!";
break;
case "12": info.innerHTML="Schlüsselübergabe an den Gemeindebrandmeister";
break;
case "13": info.innerHTML="Schlüsselübergabe an den Ortswehrführer";
break;
case "14": info.innerHTML="Grupenfoto vor dem neuen Fahrzeug mit einem Teil der Kameraden der Wehr";
break;
case "15": info.innerHTML="In Augenscheinnahme des Fahrzeuges!";
break;
case "16": info.innerHTML="Endlich in der neuen Unterkunft";
break;


}
 
 
 }
 </script>

</head>
<body onload="roll_left();">
<div id="wrapper">
<div id="preview">
<div id="thumbs" style="position:relative; left:0px;">


[img]01_t.jpg[/img][img]02_t.jpg[/img][img]03_t.jpg[/img][img]04_t.jpg[/img][img]05_t.jpg[/img][img]06_t.jpg[/img][img]07_t.jpg[/img][img]08_t.jpg[/img][img]09_t.jpg[/img][img]10_t.jpg[/img][img]11_t.jpg[/img][img]12_t.jpg[/img][img]13_t.jpg[/img][img]14_t.jpg[/img][img]15_t.jpg[/img][img]16_t.jpg[/img]
</div>
</div>
[img][/img]


<span id="infotext">noch kein infotext</span>
</div>
</body>
</html>

Alles anzeigen

hier der link damit du des mal angucken kannst
http://home.arcor.de/synaptic/hilfe/js_gal/gallery.html

hab dabei net auf xhtml-validität geachtet!!

mattis_1

Hi

Danke. Sieht sehr gut aus. Werd es demnächst einbauen.

Also nochmal vielen Dank.

synaptic

ich bastel grad noch am feinschliff (preloader und sowas)
sobald ich des fertig hab schick ich es wieder in den äther und du kannst den quelltext über den link bekommen.. will des net immer wieder und wieder hier posten (bin ja kein thread-exploder)

edit: so hab den preloader eingebaut und auch den platzhalter fürs bild unsichbar gemacht, bis des erste mal ein bild angeschaut wird. sobald jemand sich das erste bild angucken will, ist des dann sichtbar!

Bildergalerie mit CSS oder iframe

Tags

Benutzer online in diesem Thema