jquery Bastelei, Photogallerie

Duddle · 16.08.2012

AW: jquery Bastelei, Photogallerie

Die Reihenfolge ist wichtig. In der Doku steht

Code:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.photostack.pack.js"></script>

Du hast

Code:

<script type="text/javascript" src="stacker.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

Das PlugIn erweitert jQuery. Wenn jQuery später als das PlugIn geladen wird, hat es nichts zum erweitern.

Solche Probleme kannst du selbst rausfinden, indem du dir Firebug für Firefox installierst. Das hat eine Konsole, die dir auftretende Fehler anzeigt. Bei deiner Seite sagt er zum Beispiel:

$ is not defined

Line 1

jQuery is not defined

Line 39

Übrigens ist dieses PlugIn genau das, was ich aufgrund von ausgeschlossen hatte.

Edit: ich sehe auch gerade, dass in stacker.js nur der Initialisierungscode steht. Der bringt nichts ohne das eigentliche PlugIn (jquery.photostack.pack.js).

Duddle

Triggertrix · 16.08.2012

AW: jquery Bastelei, Photogallerie

Übrigens ist dieses PlugIn genau das, was ich aufgrund von Lizenzkosten ausgeschlossen hatte.

Das ganze finde ich sehr verwirrend und anstrengend……

Also das die Reihenfolge beachtet werden muss, war mir schlicht nicht klar, verbuche ich unter neu gelernt, aber das es so schwierig ist, ein funktionierendes, kostenfreies und ausserdem noch gut (für normal sterbliche) Dokumentiertes /Erklärtes Plugin zu finden. Oh Mann……

Auf der verlinkten Seite stand mal rein gar nichts von kostenpflichtiges Plugin oder lad das hier runter… zugegeben ich habe mich auch etwas gewundert, das der Code so kurz ist, da ich aber nichts weiter gefunden habe (und keine Ahnung habe) dachte ich…naja, passt scho… abba nix is……

Ist doch alles Kackenmistdreck das…… hätt ich gar nicht erst die Idee gehabt an meiner Seite rum zu schrauben… gelernt (was ja der heftige Nebeneffekt sein soll) hab ich bisher jedenfalls noch nicht viel.
Ich Google mir dann mal wieder einen……

Duddle · 16.08.2012

AW: jquery Bastelei, Photogallerie

Ansonsten lies dich eben in http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/ ein, das hatte ja alle von dir gewünschten Features - nur bräuchtest du PHP-Unterstützung (zumindest in der Version vom Tutorial).

Ist doch alles Kackenmistdreck das…… hätt ich gar nicht erst die Idee gehabt an meiner Seite rum zu schrauben… gelernt (was ja der heftige Nebeneffekt sein soll) hab ich bisher jedenfalls noch nicht viel.

Ich habe aus deinen Beiträgen nicht herauslesen können, dass du eine neue Sprache lernen willst. Wenn das so ist, dann lies dich auf jeden Fall in die Tutorials ein und ignoriere die fertigen PlugIns.

Verzagen hilft aber auch nicht. Wenn du ein bestimmtes Wissen nicht hast, musst du es dir entweder aneignen oder einkaufen. Es nützt dabei aber immer, von unten anzufangen. Der angestrebte Effekt ist jedenfalls ziemlich komplex und verbindet einige Techniken. Ergo musst du dich entweder durchbeißen (und bei Bedarf fragen) oder du suchst dir einen Profi der es für dich macht.

Edit: in deinem ersten Beitrag im Thread hattest du auch auf gezeigt, welches Zitat "bis auf Einschränkungen ziemlich genau das macht was" du suchst. Es ist auch sehr simpel. Das Ding benutzt zwar MooTools statt jQuery, aber das ist im Endeffekt auch ziemlich egal.

Duddle

Triggertrix · 16.08.2012

AW: jquery Bastelei, Photogallerie

Ich habe aus deinen Beiträgen nicht herauslesen können, dass du eine neue Sprache lernen willst.

Nee, das habe ich ehrlich gesagt auch nicht vor, ich habe, sagen wir mal… eine sehr spezielle Art des Lernens, ohne da zu viel strippen zu wollen ;o)
Das heisst dieses Straight-Forward, wie es in Tutorials vorausgesetzt wird oder in Büchern vermittelt wird, läuft bei mir nicht. Was auch nicht schlimm ist. Ich muss nur das system verstehen dann ist der Rest (für mich) selbsterklärend, was aber bei so (scheinbar) komplexen Sachen wie Javascript erst mal lange lange dauert…

Ansonsten lies dich eben in ein, das hatte ja alle von dir gewünschten Features

Tendenziell ja, nur ist das eben nicht auflösbar für mich, also sprich ich habe das Grundgerüst und kann den Effekt als solchen nicht raus nehmen. Sprich ich müsste die gesamte Seite so übernehmen und die ist ja Seitenfüllend und lässt sich nicht in das "Content-Div" rein packen, genau da liegt ja der Hund begraben.

Dank & Gruss

Triggertrix · 16.08.2012

AW: jquery Bastelei, Photogallerie

Oder eine andere Idee:

http://galileory.sourceforge.net/#howtouse
Das ist zwar wieder ganz etwas anderes, aber sieht doch durchaus nett aus.
Das einzige was mir da fehlt, das ich zunächst die Thumbnail-Ansicht bekomme und es dann in den Viewer-Mode geht.
Wenn man das ändern kann, wäre das mein Schätzchen.

Was meint Ihr dazu?

Gruss & Dank

Duddle · 16.08.2012

AW: jquery Bastelei, Photogallerie

Triggertrix schrieb:
Tendenziell ja, nur ist das eben nicht auflösbar für mich, also sprich ich habe das Grundgerüst und kann den Effekt als solchen nicht raus nehmen.

Der Stack-Effekt wird bei Klick auf die Alben gestartet. Die Alben sind

HTML:

<div class="ps_album" style="opacity:0;">
    <img src= "albums/album9/thumb/thumb.jpg" alt="">
    <div class="ps_desc">
	<h2>Fearful Water</h2>
	<span>If the doors of perception were cleansed everything would
	    appear to man as it is, infinite.</span>
    </div>
</div>

Sie haben alle die Klasse "ps_album". Wahrscheinlich wird also der Effekt bei Klick an alle Elemente mit dieser Klasse gebunden. Suchen wir im JS nach ps_album, finden ... nichts. Also ist der Effekt wohl an ein Eltern-Element gebunden.
Dieses ist ein div mit id "ps_albums". Fast das gleiche, aber nur fast. Schauen wir danach, finden wir als erstes

Code:

var $ps_albums 		= $('#ps_albums');

was nur ein Zwischenspeichern dieses Objektes (ausgewählt per jQuery-Magie) bewirkt, um später nicht ständig die aufwändigen Such-Algorithmen starten zu müssen. Optimierung, bla.
Also wird wohl in Zukunft mit der Variable $ps_albums gearbeitet. Es gibt einige Vorkommen davon, alle sind kommentiert. Spät im Code finden wir

Code:

/**
* when we click on an album,
* we load with AJAX the list of pictures for that album.
* we randomly rotate them except the last one, which is
* the one the User sees first. We also resize and center each image.
*/
$ps_albums.children('div').bind('click',function(){

Das ist exakt das Gesuchte. Also ist alles was für den Effekt notwendig ist wahrscheinlich in der hier definierten Funktion. Alles ausserhalb ist entweder unnötig oder nur in Vorbereitung auf diese Funktion deklariert.

Der erste Ansatz wäre es jetzt also, diese Funktion zu extrahieren und zu sehen was passiert. Die zu erwartenden Fehler werden im Firebug analysiert und die Funktion angepasst. Idealerweise 20 Minuten später hast du eine für dich abgewandelte Version vom Effekt mit allen Spielereien, aber ohne das drumherum.

Duddle

Triggertrix · 16.08.2012

AW: jquery Bastelei, Photogallerie

Das heisst…… mal doof in meine Worte übersetzt…
Ich könnte einfach meine Testseite nehmen, nenne den Div für die Inhalte einfach "Albums" (wonach ich auch wie ein gestörter gesucht hatte, hatte ich allerdings mit X-Ray erkannt, Firebug finde ich ziemlich kryptisch) und könnte darin den Stack laufen lassen……

müsste ja (zumindest) theoretisch so einfach sein, oder?

Duddle · 16.08.2012

AW: jquery Bastelei, Photogallerie

Nicht ganz.
Wie gesagt brauchst du PHP-Unterstützung in der dort gezeigten Version, weil er dynamisch die Bilder im gewünschten Verzeichnis ausliest. Falls du das nicht hast, müsstest du den entsprechenden Code (erkennbar an der Zeile mit photostack.php) anpassen.

Ausserdem gibt es noch ein paar Hilfs-Funktionen zum Durchblättern und Schließen. Aber das wäre dann der nächste Schritt.

An FireBug muss dich nur die Konsole interessieren. Starte Firebug auf deiner Seite, dann lade sie neu. Falls die Konsole leer bleibt -> keine Fehler. Falls nicht, schaust du dir die Meldung an und suchst die Zeile im Code. In der Regel ist es sehr eindeutig.

Edit: Hach, nach so viel hin und her wollte ich natürlich sehen, wie schwierig es tatsächlich ist. Zugegeben hat es 40 statt der erwarteten 20 Minuten gedauert, aber das ist auch noch akzeptabel. Der Code selbst ist wirklich nicht schwierig (wenn man Erfahrung mit jQuery hat), das meiste kann man direkt übernehmen. Das ganze lästige Zeug wurde im Tutorial-Code schon erledigt, der Effekt-Code selbst ist dagegen fast nix.

Ich habe mir deine Testsite mal runtergeladen und damit rumgespielt. Ergebnis:

HTML:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Untitled Document</title>
	<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="jquery.easing.1.3.js"></script>
	<link href="testsite_style.css" rel="stylesheet" type="text/css" />
	<link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
	<div id="container">
	    <div id="head"></div>
	    <div id="main">
		<div id="navi">Content for  class "Navi" Goes Here</div>
		<div id="inhalte">
		    <div id="ps_overlay" class="ps_overlay" style="display:none;"></div>
		    <a id="ps_close" class="ps_close" style="display:none;"></a>
		    <div id="ps_container" class="ps_container" style="display:none;">
			<a id="ps_next_photo" class="ps_next_photo" style="display:none;"></a>
		    </div>
		    <div id="galerie">
			<div class="album">
			    <img src="galerie1/01.jpg" alt="Alt text goes here..."width="50%" height="auto" />
			    <img src="galerie1/02.jpg" alt="Alt text goes here..."width="50%" height="auto" />
			    <img src="galerie1/03.jpg" alt="Alt text goes here..." width="50%" height="auto"/>
			    <img src="galerie1/04.jpg" alt="Alt text goes here..." width="50%" height="auto"/>
			</div>
			<hr>
			<div class="album">
			    <img src="galerie1/05.jpg" alt="Alt text goes here..."width="50%" height="auto" />
			    <img src="galerie1/06.jpg" alt="Alt text goes here..."width="50%" height="auto" />
			    <img src="galerie1/07.jpg" alt="Alt text goes here..." width="50%" height="auto"/>
			    <img src="galerie1/08.jpg" alt="Alt text goes here..." width="50%" height="auto"/>
			</div>
		    </div>
		</div>
		<br/>
	    </div>
	</div>

	<script type="text/javascript" language="javascript" charset="utf-8">
	    $(document).ready(function () {
		    $ps_albums = $("#galerie");
		    $ps_albums.children(".album").find('img:not(:first)').hide();

		    var $ps_container = $('#ps_container');
		    var $ps_overlay = $('#ps_overlay');
		    var $ps_close = $('#ps_close');
		    $(".album").bind('click', function () {
			    var $albumb = $(this);

			    $ps_container.find('img').remove();
			    $(this).children('img').each(function () {
				    $img = $(this).clo_ne();
				    var src = $img.attr('src');
				    resizeCenterImage($img);
				    $ps_container.append($img);
				    var r = Math.floor(Math.random() * 41) - 20;
				    $img.css({
					    '-moz-transform': 'rotate(' + r + 'deg)',
					    '-webkit-transform': 'rotate(' + r + 'deg)',
					    'transform': 'rotate(' + r + 'deg)'
				    });
				    $img.show();
			    });
			    $ps_container.find('img').last().css({
				    '-moz-transform': 'rotate(0deg)',
				    '-webkit-transform': 'rotate(0deg)',
				    'transform': 'rotate(0deg)'
			    });
			    $ps_container.show();
			    $ps_close.show();
			    $ps_overlay.show();
		    });
		    $ps_container.live('mouseenter', function () {
			    $('#ps_next_photo').show();
		    }).live('mouseleave', function () {
			    $('#ps_next_photo').hide();
		    });
		    $('#ps_next_photo').bind('click', function () {
			    var $current = $ps_container.find('img:last');
			    var r = Math.floor(Math.random() * 41) - 20;

			    var currentPositions = {
				    marginLeft: $current.css('margin-left'),
				    marginTop: $current.css('margin-top')
			    }
			    var $new_current = $current.prev();

			    $current.animate({
				    'marginLeft': '250px',
				    'marginTop': '-385px'
			    }, 250, function () {
				    $(this).insertBefore($ps_container.find('img:first')).css({
					    '-moz-transform': 'rotate(' + r + 'deg)',
					    '-webkit-transform': 'rotate(' + r + 'deg)',
					    'transform': 'rotate(' + r + 'deg)'
				    }).animate({
					    'marginLeft': currentPositions.marginLeft,
					    'marginTop': currentPositions.marginTop
				    }, 250, function () {
					    $new_current.css({
						    '-moz-transform': 'rotate(0deg)',
						    '-webkit-transform': 'rotate(0deg)',
						    'transform': 'rotate(0deg)'
					    });
				    });
			    });
		    });
		    $('#ps_close').bind('click', function () {
			    $ps_container.hide();
			    $ps_close.hide();
			    $ps_overlay.fadeOut(400);
		    });
	    });

	    function resizeCenterImage($image) {
		    var theImage = new Image();
		    theImage.src = $image.attr("src");
		    var imgwidth = theImage.width;
		    var imgheight = theImage.height;

		    var containerwidth = 460;
		    var containerheight = 330;

		    if (imgwidth > containerwidth) {
			    var newwidth = containerwidth;
			    var ratio = imgwidth / containerwidth;
			    var newheight = imgheight / ratio;
			    if (newheight > containerheight) {
				    var newnewheight = containerheight;
				    var newratio = newheight / containerheight;
				    var newnewwidth = newwidth / newratio;
				    theImage.width = newnewwidth;
				    theImage.height = newnewheight;
			    } else {
				    theImage.width = newwidth;
				    theImage.height = newheight;
			    }
		    } else if (imgheight > containerheight) {
			    var newheight = containerheight;
			    var ratio = imgheight / containerheight;
			    var newwidth = imgwidth / ratio;
			    if (newwidth > containerwidth) {
				    var newnewwidth = containerwidth;
				    var newratio = newwidth / containerwidth;
				    var newnewheight = newheight / newratio;
				    theImage.height = newnewheight;
				    theImage.width = newnewwidth;
			    } else {
				    theImage.width = newwidth;
				    theImage.height = newheight;
			    }
		    }
		    $image.css({
			    'width': theImage.width,
			    'height': theImage.height,
			    'margin-top': -(theImage.height / 2) - 10 + 'px',
			    'margin-left': -(theImage.width / 2) - 10 + 'px'
		    });
	    }
	</script>
    </body>
</html>

Das style.css kommt aus dem Tutorial und hat eine kleine Änderung im Style für ".ps_container". Dessen "position" sollte "fixed" sein, sonst ist der Photo-Stapel immer oben auf der Seite.

Alle Elemente mit Klassen oder ids alá "ps_*" sind irgendwann wichtig und sollten wenn überhaupt nur verschoben werden.

Die Alben selbst sind mit Klasse "album" markiert und das stets erste Bild dient zum Klicken. Das Eltern-div mit id "galerie" ist als Ausgangspunkt wichtig. Der Rest ist unangetastet geblieben.

Das CSS-Zeug kannst du selbst rausfinden, um gewisse Elemente zu positionieren / in der Größe zu ändern.

EDIT 2: der blödsinnige Foren-Filter entfernt clo_ne (ohne Unterstrich), das musst du im Code anpassen.

Duddle

Triggertrix · 17.08.2012

AW: jquery Bastelei, Photogallerie

Zugegeben hat es 40 statt der erwarteten 20 Minuten gedauert

Ich kenne Menschen die hätten das nach 40Tagen noch nicht soweit ;o)
Alles andere dazu kommt per PM… an dieser Stelle erstmal WOW…… und Danke!

Allerdings brauche ich noch zwei Erklärungen.
Zum einen verschwinden (bis auf den FF), die "Steuerbilder", also "next" + "close", ich sehe zwar einen halbtransparenten Rahmen, an der entsprechenden Stell, aber die Bilder als solches sind weg.
Das passiert, wenn ich die erste Gallery duchgeblättert habe und zur zweiten übergehe oder/und zurück zur ersten, sprich sobald ich noch eine Galerie nach der ersten öffne.… merkwürdig das. Ich habe die Seite zuerst
offline unter MAMP betrieben und dachte dann das läge ggf. daran und hab sie dann auf den Server hochgeschoben, ist aber dasselbe.

Dann brauche ich ein wenig Kontrolle über die Vorschaubilder, also die jeweils ersten Bilder der Alben die als quasi "Thumbnails" dienen. Ich habe die jetzt einfach über die Attribute bei der "source"-notierung auf 10% verkleinert, das war´s aber auch.
Soweit ich durch den Code durchsteige, wird das ganze jetzt nicht mehr (wie im Original) via dem PHP-Script aus dem Ordner "Albums" geladen, sondern einfach in der Bildnotation die Quelle angegeben.
Jetzt weiss ich noch dass das erste Bild das angezeigte ist. Sobald ich daran etwas ändere, passiert entweder gar nix (z.B. habe ich einen Titel Tag dazu gesetzt, aber der wird nicht angezeigt) oder ich produziere merkwürdige Fehler.

Also ohne Deine Geduld überstrapazieren zu wollen, aber kannst Du mir sagen, wo ich eingreifen kann um die Art der "Thumbnail"-Präsentation zu verändern? Also anstatt vertikale Anordnung (alle untereinander) hätte ich die gerne nebeneinander 4x4 Raster oder so (natürlich mit margin etc. pp)
EDIT: Also das mit den Bildunterschriften habe ich soweit lösen können. Ich hab einfach mal ganz mutig einen P-Tag unter das erste Bild gesetzt und siehe da…… klappt, den Rest kann ich dann ja sicher über #album p{ etc. im CSS definieren.

Oh, hier btw. die Seiten:

Duddle · 17.08.2012

AW: jquery Bastelei, Photogallerie

Zum einen verschwinden (bis auf den FF), die "Steuerbilder", also "next" + "close", ich sehe zwar einen halbtransparenten Rahmen, an der entsprechenden Stell, aber die Bilder als solches sind weg.

Na dann finde mal raus, a) wo die Bilder festgelegt werden und b) ob der Pfad zu denen korrekt ist.

Jetzt weiss ich noch dass das erste Bild das angezeigte ist. Sobald ich daran etwas ändere, passiert entweder gar nix (z.B. habe ich einen Titel Tag dazu gesetzt, aber der wird nicht angezeigt) oder ich produziere merkwürdige Fehler.

Das Ding funktioniert so: für jeden Teilbaum mit Klasse "album" versteckt er bis auf das erstgefundene alle Bilder. Das kannst du fast schon exakt so im Code lesen

Code:

$ps_albums.children(".album").find('img:not(:first)').hide();

Ergo ist die Reihenfolge der Bilder völlig egal. Das erste bleibt und wird gleichzeitig Fläche zum Anklicken (weil alle anderen versteckt sind). Du kannst alternativ dazu natürlich auch Thumbnails erstellen und als erstes setzen, aber dann müsstest du in

Code:

$(this).children('img').each(function () {

noch einen kleinen Filter einbauen.
Der Titel wird nicht angezeigt, weil es kein Attribut namens "titel" gibt. Aber Tippfheler macht jeder.

Die Anordnung der Alben selbst ist eine Sache von CSS. Das habe ich länger nicht gemacht, aber es wird wohl mit korrektem float funktionieren. Da musst du dich mal durchkämpfen und ein bisschen experimentieren. Tutorials zu CSS gibt es genügend.

Möchtest du die Bildunterschriften unter den Pseudo-Thumbnails oder im Stack selbst? Ersteres ist kein Problem, du musst nur das HTML dafür einbauen. Nur die Bilder werden versteckt. Letzteres wird schwieriger, aber wenn du dir ein Beispiel an ps_close oder ps_overlay ein Beispiel nimmst (im Code und im CSS) und lernst wie das ein- und ausgeblendet wird, geht das auch.

Duddle

Triggertrix · 17.08.2012

AW: jquery Bastelei, Photogallerie

Na dann finde mal raus, a) wo die Bilder festgelegt werden und b) ob der Pfad zu denen korrekt ist.

kay ;o)

Code:

a.ps_close{
	background:#000 url(../images/close.png) no-repeat center center;

EDIT: Hmpf…… ok wieder doof gewesen, das verhält sich nicht relativ zur Seite, sondern zum Server…… ;o)
Alles klar, hab´s danke……

Die Anordnung der Alben selbst ist eine Sache von CSS. Das habe ich länger nicht gemacht,

Heisst ich kann da ruhig mit DL dran rum schubsen, das hat keine Auswirkung auf die Funktionalität?

Möchtest du die Bildunterschriften unter den Pseudo-Thumbnails oder im Stack selbst?

Ersteres!
Mein Edit hat sich wohl mit Deiner Antwort überschnitten.
letzteres wäre zwar auch gut, muss aber gar nicht.

Also wenn ich es mal wieder umformulieren darf.
Ich habe hier eine "stinknormale" HTML Seite, die sich via CSS formatieren lässt. Einzig, es werden in allen angeführten Alben, alle Bilder bis auf das Erste versteckt, welches eine "Onclick" Funktion, als quasi Rattenschwanz hat, aber nichts mit dem Aussehen, Anordnung etc. der Seite zu tun hat.

Trifft es das?

Dank & Gruss

Duddle · 17.08.2012

AW: jquery Bastelei, Photogallerie

Heisst ich kann da ruhig mit DL dran rum schubsen, das hat keine Auswirkung auf die Funktionalität?

Nein.

Trifft es das?

Ja. Das ist das Prinzip "Progressive Enhancement".

Duddle

Triggertrix · 19.08.2012

AW: jquery Bastelei, Photogallerie

Also ich habe jetzt alle CSS-Macht, die mir zur Verfügung steht, aufgeboten.
Ich bekomme es nicht hin, ich schäme mich auch ein bisschen schon wieder hier zu schreiben, aber ich weiss (mal wieder) nicht weiter.

Ich versuche die ganze Zeit, die Bilder die als Thumbnails dargestellt werden, zusammen mit Text, als Platzhalter für Galerien bündig zusammen zu fassen, so dass ein 3x3 Raster entsteht.
Allerdings bekomme ich das egal was ich tue nicht hin.

Also Ziel soll sein, -sofern möglich- ein Thumnail mit einer Bildunterschrift (derzeit h1), nebenan einen kleinen Beschreibungstext. Alle drei Elemente (Bild, h1, text) sollen am Ende in einen grauen Kasten gesetzt werden, so das sie optisch als Einheit wirken.

Mach ich ein zusätzliches DIV drum, passiert nichts, steuere ich das "Album" an, ebenfalls nicht… ich habe bisher nur den Text via "Span" ein wenig steuern können. Jetzt habe ich aber fiese Umbrüche die ich aber nicht anders hin bekomme.

Kann mir da jemand etwas dazu sagen wie ich das gesteuert bekomme?

Dank & Gruss

P.S. Nein die Seite bleibt nicht so dilettantisch, ist nur um mir das optisch einfach zu machen, erst muss ich o.g. Problem lösen…

Duddle · 19.08.2012

AW: jquery Bastelei, Photogallerie

Wie vorher schon angedeutet sind das keine Fragen mehr bzgl. PHP und anderen Scriptsprachen. Diese Art von Problemen werden in zuverlässiger gelöst. Aber weil wir schon mal hier sind:

Das was du machen willst wird in sehr vielen Tutorials bzgl. HTML und CSS beschrieben. Du bist nicht der erste mit den Wünschen, ergo hat jemand das Problem gelöst und diese Lösung - falls sie besonders elegant ist - schon veröffentlicht.

http://css.maxdesign.com.au/floatutorial/

http://de.html.net/tutorials/css/lesson13.php

Das sind die ersten drei Ergebnisse bei der Suche nach "float tutorial". [STRIKE]Wenn du nicht wusstest, dass CSS "float" hat, hast du dir keine Einsteiger-Tutorials durchgelesen.[/STRIKE] Edit: okay, du scheinst zu wissen, dass es float gibt. Dann lies dir die Tutorials durch um zu lernen wie man es korrekt einsetzt.

Ohne dass ich CSS länger gemacht habe würde mein Ansatz z.B. so aussehen:

HTML:

<!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>Page Title</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css" media="screen">
		    #alben {
			border: 1px solid red;
			width:66%;
			margin:auto;
		    }
		    .kasten {
			border: 1px solid blue;
			width:33%;
			float:left;
		    }
		    .unterschrift {
			font-size:1em;
			border:1px solid gray;
		    }
		    .album {
			float:left;
			border: 1px solid teal;
		    }
		</style>
	</head>

	<body>
	    <div id="alben">
		<div class="kasten">
		    <div class="album">
			<img src="http://placekitten.com/150/220" />
			<h1 class="unterschrift">Album 1</h1>
		    </div>
		    <p class="beschreibung">Lorem ipsum dolor sit amet</p>
		</div>
		<div class="kasten">
		    <div class="album">
			<img src="http://placekitten.com/150/320" />
			<h1 class="unterschrift">Album 2</h1>
		    </div>
		    <p class="beschreibung">Lorem ipsum dolor sit amet</p>
		</div>
		<div class="kasten">
		    <div class="album">
			<img src="http://placekitten.com/150/200" />
			<h1 class="unterschrift">Album 3</h1>
		    </div>
		    <p class="beschreibung">Lorem ipsum dolor sit amet</p>
		</div>
		<div style="clear:both;"></div>
		<div class="kasten">
		    <div class="album">
			<img src="http://placekitten.com/180/220" />
			<h1 class="unterschrift">Album 4</h1>
		    </div>
		    <p class="beschreibung">Lorem ipsum dolor sit amet</p>
		</div>
	    </div>
	</body>
</html>

Abgesehen von den Katzen solltest du mehrere Dinge bemerken: erstens ist der Aufbau des Quelltextes ziemlich logisch. Schaust du dir die Seite ohne Style an, haben die Elemente trotzdem noch eine sinnvolle Anordnung und Bedeutung (z.B. h1 statt span, weil es dort die Funktion einer Überschrift hat).

Zweitens werden Klassen den Elementen gegeben, die die gleiche Funktion erfüllen und ids treten nur einmalig auf. So sind die Dinger gedacht.

Drittens, und das stört mich bei deinem HTML sehr, ist der Code korrekt eingerückt. Das macht jeder gescheite HTML-Editor automatisch und erlaubt dir und anderen (*hust*) sehr viel schneller, Fehler zu erkennen und Bereiche auseinander zu halten.

Auch wirst du die bunten Rahmen bemerken. Mit denen siehst du fix wie die Elemente miteinander agieren und wer was wohin schiebt. Für solche Hilfs-Linien gibt es auch Tools, aber für diese klitzekleine Seite ist der Einsatz von border schneller.

Duddle

Triggertrix · 19.08.2012

AW: jquery Bastelei, Photogallerie

Dein Post hatte viel Gehalt.

Ich habe das jetzt mal Original (so hoffe ich zumindest) nach Deinem Modell umgesetzt und es passiert (Gott sei Dank, dann bin ich nicht ganz so doof…… so kam ich nämlich auf "span") genau das was mir auch passiert ist, die Bilder der einzelnen Alben purzeln umher, also die Funktion "hide die anderen" ;o) läuft dann nicht mehr.

EDIT II: Ich habe jetzt noch mal geschaut ob es einen Unterschied macht, die Bildgrösse via dem DIV anzusprechen oder sie direkt in das Image-Tag zu notieren, bleibt aber gleich.

Das war ja eines meiner Eingangsthemen, sobald ich um die "funktionalen" Div´s ein weiteres lege, schneide ich (offenbar) dem Javascript den Weg ab…… soweit ich das verstehe.…

Edit I:

Dann lies dir die Tutorials durch um zu lernen wie man es korrekt einsetzt.

Jep, mache ich, versprochen!
Den Wust den Du derzeit siehst, entstand allerdings durch viermal umschreiben… keine Entschuldigung, aber Erklärung.

Zweitens werden Klassen den Elementen gegeben, die die gleiche Funktion erfüllen und ids treten nur einmalig auf. So sind die Dinger gedacht.

Hatte ich bisher noch nicht verstanden, aber jetzt, danke

das stört mich bei deinem HTML sehr, ist der Code korrekt eingerückt. Das macht jeder gescheite HTML-Editor automatisch

Nachdem mir Dreamweaver die Arbeit eines kompletten Tages zerstört hat, bin ich auf Fraise ausgewichen. Der macht das leider nicht besonders toll, habe ich den Eindruck, finde aber auch keinen zu einem (für mich) annehmbaren Preis (für´n Mac), Eclipse, Aptana & Co scheinen eher was für App-Entwickler zu sein, sonst konnte ich nichts finden. Coda = 80€ ist mir dann doch zu heftig.

Duddle · 19.08.2012

AW: jquery Bastelei, Photogallerie

EDIT II: Ich habe jetzt noch mal geschaut ob es einen Unterschied macht, die Bildgrösse via dem DIV anzusprechen oder sie direkt in das Image-Tag zu notieren, bleibt aber gleich.

Das ist ... eine Funktion von placekitten.com und dient der Spezifizierung der Platzhalter-Größe. Natürlich geht das nicht mit deinen normalen Bildern.

Versuch zu verstehen, was der JS-Code macht und warum das mit der Struktur nicht funktioniert. Er muss etwas umgeschrieben werden, damit er das neue Zeug beachtet. Ich hatte vorher bestätigt, dass das Script problemlos mit geändertem CSS klar kommt. Jetzt wurde auch das HTML geändert.

Ja, das ist nervig. Aber in der Regel schreibt man erst das HTML. Dann bringt man es mit CSS in die gewünschte Richtung. Erst im dritten Schritt pappt man das JavaScript drauf, um ein paar Zusatzfunktionen anzubieten. Du hast von hinten begonnen und deshalb jetzt Probleme.

Duddle

Triggertrix · 19.08.2012

AW: jquery Bastelei, Photogallerie

kannst Du mir einen Tip geben? Welche Zeile oder in welcher Art ich was ändern muss?

Ha!!!

Nix da Tip geben…… SEHT MICH AN……… ICH HABE FEUER GEMACHT!!! ;o)

Duddle · 19.08.2012

AW: jquery Bastelei, Photogallerie

Dann such du dir jetzt nur noch einen besseren Text-Editor, z.B. http://de.wikipedia.org/wiki/Proton_Code_Editor oder http://de.wikipedia.org/wiki/Notepad2 oder http://de.wikipedia.org/wiki/Notepad++ bzw. .

Ach und ich schlage vor, irgendwann den Vorschau-Bildern per CSS "background-image" eine Art angedeuteten Bilder-Stapel zu geben. Dann vermittelt das optisch den Eindruck von "hier ist noch mehr" statt es explizit in zwei Sprachen dazu schreiben zu müssen.

Duddle

Triggertrix · 19.08.2012

AW: jquery Bastelei, Photogallerie

Dann such du dir jetzt nur noch einen besseren Text-Editor, z.B.

Die sind alle für Windoof…
Wäre viellicht ein Thema für einen anderen Thread, die die ich gefunden habe taugen nix oder kosten zu viel. Der einzig noch sinnvolle (wie mir scheint) ist Fraise.
So etwas wie Phase5 hätte ich gerne, darüber habe ich viel gutes gehört…

ich schlage vor, irgendwann den Vorschau-Bildern per CSS "background-image" eine Art angedeuteten Bilder-Stapel zu geben.

Umbedingt, die Idee hatte ich noch gar nicht, ist aber eine schöne, schlichte Idee das klar zu machen und allemal besser als die Textzeile……

Und mal wieder einen dicken Dank an Dich!

Duddle · 19.08.2012

AW: jquery Bastelei, Photogallerie

http://en.wikipedia.org/wiki/Comparison_of_text_editors#Mac-only bzw. http://en.wikipedia.org/wiki/Comparison_of_text_editors#Java-based ?

Einige davon sind frei.

Duddle