 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
kalle76
Threadersteller
Dabei seit: 13.01.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 13.01.2013 15:03
Titel Bildergalerie mit Thumbnail |
  |
|
Hallo zusammen,
ich bin seit einiger Zeit dabei eine Bildergalerie zu erstellen. Bisher klappt eigentlich auch alles recht gut nur komme ich nun nicht mehr weiter.
Ich möchte eine Bildergalerie erstellen bei der auf der linken Seite 10 Thumbnails zusehen sind und rechts daneben in groß das jeweilige Bild gezeigt wird. Das klappt momentan auch alles. Nun möchte ich aber gerne, dass wenn ich auf ein Thumbnail geklickt habe sich auf der rechten Seite nicht nur ein Bild , sondern mehrere Bilder von einer Kategorie zeigen.
Also wenn ich beispielsweise zwei Thumbnails habe, wovon eines "autos" und das andere "fussball" heißt, dass wenn ich auf das Thumbnail "autos" klicke sich auf der rechten Seite beispielsweise 4 Bilder aus der Kategorie "autos" darstellen. Und diese unterschiedlich vielen Bilder auf der rechten Seite dann in einem Slider dargestellt werden.
Ich hoffe ich habe es verständlich ausgedrückt 
Hier mal der Code den ich bisher habe.
$(document).ready(function () {
$("#b1").click(function() {
$("img#bild").slideDown("slow");
$("img#bild").attr({src:"_img/_portfolio/_illustartion/_gross/_illustration_gross_01.jpg"});
$("headline").fadeIn("slow");
$("#headline").text("Der Mann auf dem Mond");
$("#subline").text("Mann auf dem Mond - Illustration für ein Kinderbuch");
});
});
</script>
<!--Javascript Slider Ende-->
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="thumb">
<h2>Illustration</h2>
<a href="#" id="b1"><img src="_img/_portfolio/_illustartion/_klein/slider_1_klein.jpg"/></a>
<a href="#" id="b2"><img src="_img/_portfolio/_illustartion/_klein/slider_2_klein.jpg"/></a>
<a href="#" id="b3"><img src="_img/_portfolio/_illustartion/_klein/slider_3_klein.jpg"/></a>
<a href="#" id="b4"><img src="_img/_portfolio/_illustartion/_klein/slider_4_klein.jpg"/></a>
<a href="#" id="b5"><img src="_img/_portfolio/_illustartion/_klein/slider_5_klein.jpg"/></a>
<a href="#" id="b6"><img src="_img/_portfolio/_illustartion/_klein/slider_6_klein.jpg"/></a>
</div>
Ich hoffe irgendjemand kann mir eventuell weiterhelfen, da ich wirklich nicht mehr weiter weiß. Habe alles mögliche durchsucht.
Vielen Dank schon mal im Voraus
Kalle
|
|
| |
  |
 |
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht: 
|
Verfasst Mo 14.01.2013 13:01
Titel
|
|
|
Ich geh jetzt mal davon aus, dass du auf keine Datenbank oder so zugreifst, um an die Daten zu kommen...
Ich weiß auch nicht genau, wo jetzt dein Problem liegt, aber um den Spaß noch halbwegs sauber hinzubekommen, solltest du dann wohl eher die Daten innem Objekt festlegen, das du dann auslesen und iterieren kannst.
Das könnt in etwa so ausschaun: | Code: | var kategorien= {
"autos": {
"name": "Text",
"pfadGross": "bla.jpg",
"pfadKlein": "blubb.jpg",
"bilder": [
{
"pfadGross": "foo.jpg",
"pfadKlein": "bar.jpg",
"headline": "kgdgf",
"subline": "fgjhfznh"
},
{
"pfadGross": "foo.jpg",
"pfadKlein": "bar.jpg",
"headline": "kgdgf",
"subline": "fgjhfznh"
}
]
},
"fussball": {
"name": "Text",
"pfadGross": "bla.jpg",
"pfadKlein": "blubb.jpg",
"bilder": [
{
"pfadGross": "foo.jpg",
"pfadKlein": "bar.jpg",
"headline": "kgdgf",
"subline": "fgjhfznh"
}
]
}
}; |
Das HTML erstellst dann direkt daraus mit "kategorien.fussball.pfadGross" etc
|
|
| |
|
|
|
Anzeige
|
|
|
kalle76
Threadersteller
Dabei seit: 13.01.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 14.01.2013 13:51
Titel Danke fyll |
|
|
Hey fyll
danke schon einmal für die schnell Antwort.
Genau ich greife auf keine Datenbank zurück. Das ist mir in dem Fall zu aufwendig.
Mein grundsätzliches Problem liegt darin, dass ich zwar die Verlinkung von dem kleinen Thumbnail zum großen Bild bekomme, ich jedoch nicht bei dem großen Bild mehrere Bilder der Kategorie in einem Slider zeigen kann.
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mo 14.01.2013 14:25
Titel
|
|
|
Du hast aber schon mehr als die ersten beiden Sätze meines Beitrags gelesen? 
Du sollst mit den Daten aus dem Objekt den Slider befüllen...
Das bisschen JavaScript da oben ist schon von dir? Du hast also ein grobes Verständnis dafür, was da so passiert?
Machen wirs anderst:
Du schaust dir das Objekt da oben an, nimmst das und kombinierst es dann mit dem nachfolgenden Scriptschnipsel und spielst ein wenig damit rum - um verstanden zu haben, was da vor sich geht.
Das gelernte setzt du dann um, um dein Problem zu lösen:
| Code: | $(function()
{
/*jshint globalstrict: true */
'use strict';
var liste = $('<dl/>');
$.each(kategorien, function()
{
var term= $('<dt/>', { text: this.name }),
def= $('<dd/>'),
ul = $('<ul/>');
liste.append(term).append(def);
def.append(ul);
$.each(this.bilder, function()
{
$('<li/>', { text: this.headline }).appendTo(ul);
});
});
$('body').append(liste);
}); |
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Mo 14.01.2013 14:31
Titel
|
|
|
Alternativ lassen sich die Daten auch in CSS deklarieren, in Form von Hintergrundbildern für einzelne Elemente die von der Klasse eines Elternelements abhängig gemacht werden.
So muss mittels JS nur noch die Klasse des Elternelements getauscht werden.
Gruß
Karl
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[GD Lib] Thumbnail & more
Thumbnail erzeugen
imageMagick - Thumbnail
website thumbnail erstellung
Durchlaufende Gallery (Thumbnail's)
[FotoGalerie] Thumbnail to Fullscreen
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
