Modul zur Darstellung

brandy · 29. August 2011 21:51

Hallo!

Hab mir gerade überlegt eine Seite ähnlich wie diese hier zu basteln - http://www.graz-cityofdesign.at/ - gibts dazu vielleicht ein Modul zur Darstellung verschiedener Bilder, wie hier auf der Startseite? Beim hover sollte das Bild größer werden und beim Klick darauf sollte man im Bild nach links oder rechts schalten können!

Vielen Dank!

Beitrag geändert von brandy (20. März 2012 20:55)

NaN · 29. August 2011 21:59

Klingt nach Gallery Modul und Supersizer.
Ist alles nur eine Frage des Gallery Templates.

brandy · 27. September 2011 06:45

Hallo!

Hab jetzt mal das Grundgerüst online - www.arch-lechner.at/_cms

Momentan ist es ja so, dass wenn auf ein Bild klickt, man eine Ebene hinunterspringt und dann die ganzen Bilder eines Projekts sieht. Bei einem weiteren Klick öffnet sich eine Box in der man zwischen den Bildern hin- und herspringen kann.
Nun möcht ich den einen Schritt überspringen und gleich wenn man in der ersten Ebene über das Bild fährt die Box öffnen, in der man dann nach links oder rechts schalten kann... Ist das möglich?

brandy · 05. Oktober 2011 21:14

Hallo!

So ich habe nun eine konkretere Frage: Ich möchte ja, dass ein Link onmouseover geöffnet wird - jetzt hab ich das mal so eingebaut:

Hier klicken, um den Code zum Kopieren zu markieren

<a href="{$image->file}" title="{$image->titlename}" onmouseover="location.href=this.href;"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />

Nun wird mir aber nichts mehr angezeigt - was muss ich noch machen, damit das so funktioniert?

Vielen Dank!

brandy · 07. Oktober 2011 12:16

So einmal versuche ich es noch:

Wie lässt sich folgender Link on mouseover öffnen:

Hier klicken, um den Code zum Kopieren zu markieren

<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="lightbox[gallery]">

Vielen Dank!

NaN · 07. Oktober 2011 12:37

Wenn ich Dich richtig verstanden habe, willst Du sowas wie Lightbox, aber nicht durch onclick, sondern durch onmouseover?

dylan · 07. Oktober 2011 18:44

Eigentlich ganz simpel aufgebaut:

Der span-Tag enthält das überlagerte große image.
Es werden zwei 130er Felder mit einer Größe von 260 überlagert. Dadurch bleibt das Mosaik bestehen, der Rest ist reines CSS.

dylan · 07. Oktober 2011 19:15

Habe Dir schnell per CSS was zusammengebaut.
Das große Bild im span-Tag platzieren, der Rest wird per CSS gesteuert.

Hier klicken, um den Code zum Kopieren zu markieren

<div class="hoverimg">
<a title="">
<img src="bild_klein.jpg" width="200" height="200">
<span style="width:400px;height:400px;"><img src="bild_klein.jpg" width="400" height="400"></span>
</a>
</div>

.hoverimg {position: relative;}
.hoverimg a span {
display:block;
position:absolute;
left:0;
top:0;
opacity:0;}
.hoverimg a:hover span, .hoverimg a:focus span, .hoverimg a:active span {
height:0;
width:0;
opacity:1;
filter:alpha(opacity=1);
zoom:1;}

Beitrag geändert von dylan (07. Oktober 2011 19:16)

brandy · 08. Oktober 2011 13:36

@NaN: Ja genau - ist das möglich? Ich möchte dann die Modalbox positionieren und in Ihrer Größe anpassen. zB das sie immer in der linken oberen Ecke des gewählten Bildes steht....

@dylan: Sollte die Variante von Nan nicht funktionieren, bau ich dein Teil gleich ein - Vielen Dank auf jedenfall mal...

brandy · 20. Oktober 2011 14:57

So ich habs jetzt schon mal so hinbekommen -> http://www.arch-lechner.at/_cms/

Gefällt mir eigentlich schon sehr gut, aber rutschen sie nicht richtig nach - kann ich es irgendwie einrichten, dass der, der groß wird irgendwie über den anderen steht?
Ich hab auch schon an ein extriges div gedacht, dass ausserhalb vom Bild steht und bei hover herein kommt und sich an dem div mit dem Focus orientiert und ausrichtet - ist das mittels CSS möglich?

Vielen Dank!

NaN · 20. Oktober 2011 15:40

Versuch mal das hier für die Links:

.gallery .img a:hover {
border-color: #999999;
height: 260px;
position: absolute;
width: 260px;
}

und nimm dafür .gallery .img:hover { ... } einfach raus.

Wenn Du lightbox nicht mit Klick, sondern mit hover auslösen willst (was ich persönlich für keine gute Idee halte - ganz ehrlich, ich halte aus usability-Gründen diese gesamte Darstellung für keine gute Idee, aber das ist vermutlich Ansichtssache) dann musst Du wohl oder übel am Lightbox-Javascript etwas ändern:
http://www.lokeshdhakar.com/forums/disc … seovers/p1

Oder vielleicht reicht Dir ja auch sowas hier: http://www.cssplay.co.uk/menu/magnify.html
(halte ich persönlich für eine bessere Variante, weil besser bedienbar)

brandy · 21. Oktober 2011 23:08

Vielen Dank, so wollte ich das. So werde ich das lassen.
Wie mach ich das, dass auf Klick auf das Gallerycover nicht eine Ebene nach unten gehüpft wird, dafür aber kleine Thumbnails mit einem anderen Gallerytemplate in einem anderen div positioniert werden?
Versteht ihr was ich meine?

brandy · 19. Dezember 2011 07:08

Ok mein Kunde will es nicht anders - Usability hin- oder her er will im Bild in dem onrollover groß wird, zwischen den Bildern weiterschalten - werd mich also mal ans Werk machen und die Lightbox umbauen gehen...

Vielen Dank!
Ich melde mich wenn ich was habe...

brandy · 29. Dezember 2011 11:20

Hallo!

Wieder zurück am Projekt, hätte ich eine Frage wie man sowas macht, dass beim rollover über ein Bild im unteren Bereich der dazügehörige Text ausgegeben wird - am besten der Gallerykommentar - siehe diese Seite: http://www.graz-cityofdesign.at/

nockenfell · 29. Dezember 2011 11:56

Quelltext studieren, Quelltext kopieren, Try and Error. Diese Arbeit nehme ich dir hier nicht ab.

Sobald du eine funktionierende HTML Version hast, kannst du dies auf die Gallery adaptieren.

brandy · 30. Dezember 2011 10:02

So ich habs jetzt soweit, dass er mir onmouseover einen Text ausgibt:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
function comment(){
document.getElementById('comment').innerHTML = "Testext";
}
function nocomment(){
document.getElementById('comment').innerHTML = '';
}
</script>

Jetzt möcht ich aber die Variable aus dem Template {$gallerycomment} ausgeben - bau ich diese direkt ein, sagt er mir das comment nicht definiert wurde. Theoretisch müsste ich Smarty und Javascript mischen, damit ich auf das den Gallery-Kommentar zugreifen kann! Wie stelle ich das an?

Beitrag geändert von brandy (30. Dezember 2011 10:31)

nockenfell · 30. Dezember 2011 22:56

In dem du den Text der Funktion übergibst:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
function comment(gallerycomment){
document.getElementById('comment').innerHTML = gallerycomment;
}
function nocomment(){
document.getElementById('comment').innerHTML = '';
}
</script>

<a href="wasauchimmer.php" onmouseover="comment('{$gallerycomment|escape:'html'}')" onmouseout="nocoment()">.....

brandy · 20. März 2012 20:39

Hab ja vor kurzen mal eine Lösung zur Darstellung gesucht - jetzt hab ich ein passendes Beispiel gefunden, das erklärt was ich haben möchte - ich habs zuerst nicht glauben wollen, dass das wirklich funktionell ist...

Hier mal der Link:
http://www.xxxlutz.at/produkte/suche/kategorien-c3c1
Fährt einfach mal über ein Produkt, dann seht ihr was ich will - Abgesehen davon, dass es größer wird und in den Vordergrund komm, kann man hier auch noch zwischen den Bildern herumschalten...

Nur zur Erklärung:
Es sollte mit dieser Lösung Projekte eines Architekten auf der Startseite dargestellt werden. On rollover wird das Bild groß (Lösung vorhanden) und dann sollte man noch zwischen den Bildern zum Projekt herumschalten können.

Ich habs mir mal durchgedacht und an zwei Lösungen gedacht:
1. man öffnet das Bild on rollover mit einer bearbeiteten Imagebox, in der man zwischen den Bildern herumschalten kann (siehe vorgehende Posts) oder
2. man machts so, dass er auf Klick das Vorschaubild einer Untergallery ändert und somit, den Effekt des herumschaltens erzielt...

Vielen Dank!

Forum für CMS/made simple

#1 29. August 2011 21:51

Modul zur Darstellung

#2 29. August 2011 21:59

Re: Modul zur Darstellung

#3 27. September 2011 06:45

Re: Modul zur Darstellung

#4 05. Oktober 2011 21:14

Re: Modul zur Darstellung

#5 07. Oktober 2011 12:16

Re: Modul zur Darstellung

#6 07. Oktober 2011 12:37

Re: Modul zur Darstellung

#7 07. Oktober 2011 18:44

Re: Modul zur Darstellung

#8 07. Oktober 2011 19:15

Re: Modul zur Darstellung

#9 08. Oktober 2011 13:36

Re: Modul zur Darstellung

#10 20. Oktober 2011 14:57

Re: Modul zur Darstellung

#11 20. Oktober 2011 15:40

Re: Modul zur Darstellung

#12 21. Oktober 2011 23:08

Re: Modul zur Darstellung

#13 19. Dezember 2011 07:08

Re: Modul zur Darstellung

#14 29. Dezember 2011 11:20

Re: Modul zur Darstellung

#15 29. Dezember 2011 11:56

Re: Modul zur Darstellung

#16 30. Dezember 2011 10:02

Re: Modul zur Darstellung

#17 30. Dezember 2011 22:56

Re: Modul zur Darstellung

#18 20. März 2012 20:39

Re: Modul zur Darstellung

Fußzeile des Forums