Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 07. April 2011 21:19

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Gallery und Cloud-Zoom

HINWEIS:

Dieses Tutorial bezieht sich auf die ältere Version 1 von Cloudzoom.
Weiter unten sind Hinweise auf die Version 3.


Dies ist ein kleines HowTo, wie das mit MagicZoom, jedoch ist Cloud-Zoom kostenlos.
Cloud-Zoom ist ein jQuery Image Zoom Plugin ähnlich MagicZoom aber eben kostenlos.

Seite von Cloud-Zoom?

So sieht es hinterher aus:(wenigstens bei mir)
Vorschau mit Kommentar:
cloudzoom_comment.jpg
Ansicht beim Hovern über dem Bild:
cloudzoom.jpg

Beim Hovern mit der Maus über das mittlere(linke) Vorschaubild wird rechts das gezoomte Bild gezeigt.
Unterhalb(hinter) dem Zoombild kann wie üblich der Galeriekommentar stehen. Er wird durch das Zoombild überdeckt und eingeblendet. Das kann letztendlich jeder handhaben wie er will.

Was braucht man:
1) Die Javascriptdatei von Cloud-Zoom(Link oben) Cloud-Zoom ist kostenlos!
2) Das Plugin Supersizer. Da wir hier ja 3 Bilder haben, und nicht wie üblich nur 2, muss das mittlere(Hoverbild) mit Supersizer erzeugt werden.
3) Etwas CSS für den Style
4) Eine Gallery Template

Und so geht's:
Ich setze mal voraus, dass das Modul Gallery bereits installiert ist.
Supersizer sollte im Ordner /plugins/ sein.



Neue Template anlegen.

{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}

{foreach from=$images item=image name=imglist}
{if $smarty.foreach.imglist.first}
<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" class='cloud-zoom' id='zoom{$galleryid}' rel="adjustX:10, adjustY:0, zoomWidth:400, zoomHeight:250, smoothMove:5, showTitle:true" title="{$image->comment}">
<img src="{supersizer path=$image->file|escape:'url'|replace:'%2F':'/' width='180' url=1}" alt="{$image->titlename}" width="180" title="{$image->comment}" />
</a>

{if !empty($gallerycomment)}
<p class="bildtext">{$gallerycomment}
<br />[{$imagecount}]</p>
{/if}
{/if}
{/foreach}

<div id="previewimg">
{foreach from=$images item=image}
<!-- Vorschaubild -->
<a class='cloud-zoom-gallery' href="{$image->file|escape:'url'|replace:'%2F':'/'}" rel="useZoom:'zoom{$galleryid}', smallImage:'{supersizer path=$image->file|escape:'url'|replace:'%2F':'/' width='180' url=1}'" title="{$image->comment}">
<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" title="{$image->titlename}" />
</a>
{/foreach}
</div><!-- /previewimg -->


Im Feld "Template CSS-stylesheet" das CSS einfügen:

/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
    border: 1px solid #555;
    margin:-4px;    /* Set this to minus the border thickness. */
    background-color:#fff;    
    cursor:move;        
}

/* This is for the title text. */
.cloud-zoom-title {
    font-family:Arial, Helvetica, sans-serif;
    position:absolute !important;
    background-color:#000;
    color:#fff;
    padding:3px;
    width:100%;
    text-align:center;    
    font-weight:bold;
    font-size:10px;
    top:0px;
}

/* This is the zoom window. */
.cloud-zoom-big {
    border:1px solid #555;
    overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
    color:white;    
    background:#222;
    padding:3px;
    border:1px solid #000;
}

#previewimg           {clear:both; padding:10px 0;}
#previewimg a,
#previewimg a:visited {float:left; padding:0; margin:0 2px 0 0; text-decoration:none; border:1px solid white;}
#previewimg a:hover   {border-color:#000;}
#previewimg img       {display:block; padding:0; margin:0; border:none;}

p#bildtext {float:left; width:250px;}

Eventuell müssen Elemente gecleart werden. Je nachdem was floatet und wie ihr euer restliches Layout habt.



Im Feld "Template JavaScript" den Aufruf des Javascript einfügen:
Setzt voraus, dass cloud-zoom.1.0.2.js im root DIR /js/ ist. Falls abweichend: anpassen!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/cloud-zoom.1.0.2.js"></script>

Es müssen nicht die Googleapis sein. Sind aber die Schnellsten. Glaub' ich...
Man kann in diesem Feld natürlich auch ein statisch verlinktes Stylesheet angeben, wenn man das CSS nicht in Gallery haben will.

Ab hier sollte es funktionieren!

Auf der Website von Cloud-Zoom kann man unter "Intergration Instructions" die ganzen Parameter nachlesen. Es können Titel zu jedem Bild gezeigt werden oder die Größe des Zoombildes geändert werden. Die Möglichkeiten sind endlos.

EDIT: In id='zoom{$galleryid}' geändert, damit über die ID auch mehrere Galerien möglich sind.

Beitrag geändert von Klenkes (06. November 2013 12:48)

Offline

#2 02. August 2011 14:18

Hmelk
probiert CMS/ms aus
Registriert: 07. April 2011
Beiträge: 76

Re: Gallery und Cloud-Zoom

Hallo.

Super Anleitung.
Hat sofort geklappt.

Was bei mir nicht geht: Als Kommentar wird immer der Kommentar vom ersten Bild bei allen Bildern gezeigt.
Und ich darf nur 1 Gallery/Seite einbauen, bei der zweiten Gallery wird immer das erste Bild im Zoom gezeigt,  egal welches Bild ausgewählt wird.

Eine Idee was ich da falsch mache?

Gruß

Hmelk

Offline

#3 02. August 2011 15:16

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery und Cloud-Zoom

Ähem... da machst du natürlich nichts falsch. Das ist bei meinem Berispiel so.
Es ist aber durchaus möglich mehrere Zoom-Galerien pro Seite zu haben. Dann muss man sie einzeln initialisieren. Aus dem Kopf weiß ich's grade nicht, aber auf der Zoom-Website kann man es sehen.

Die Sache mit dem Titel ist komisch... Der Kunde, bei dem ich das gerade eingebaut habe, wollte keine Titel. Deshalb fiel mir wahrscheinlich nichts auf.

Ich schau mal, so bald ich Zeit habe.

Beitrag geändert von Klenkes (02. August 2011 15:16)

Offline

#4 02. August 2011 16:47

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery und Cloud-Zoom

Zum Problem mehrerer Galerien pro Seite:
Du must in der Template statt id='zoom1' der zweiten Galerie id='zoom2' mitgeben.
Das ist alles.

Besser ist natürlich:
Du hast bei Gallery Zugriff auf die galleryID. Diese würde ich in der Template so id='zoom{$galleryid}' angeben. Dann hat jede Galerie seine eigene ID und laüft separat.

Beitrag geändert von Klenkes (02. August 2011 16:47)

Offline

#5 03. August 2011 11:57

Hmelk
probiert CMS/ms aus
Registriert: 07. April 2011
Beiträge: 76

Re: Gallery und Cloud-Zoom

SUPER, das klappt. THANXS!

Falls Du noch eine Idee zum Kommentar hast, der bei jedem Bild gleich ist...

Gruß

Hmelk

Offline

#6 03. August 2011 20:35

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery und Cloud-Zoom

Hmelk schrieb:

Falls Du noch eine Idee zum Kommentar hast, der bei jedem Bild gleich ist...

Ich hab's hinbekommen.
Muss es aber noch testen und poste es dann hier.

Offline

#7 04. August 2011 10:01

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery und Cloud-Zoom

Hmelk schrieb:

Falls Du noch eine Idee zum Kommentar hast, der bei jedem Bild gleich ist...

Scheint so als hätte Professor Cloud das gar nie vorgesehen...

Du must 2 Dinge tun.

1) In die cloud-zoom.js Datei muss folgende Zeile rein: (ganz unten Zeile ca. 368)

// Change the small image to point to the new small image.
$('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);

// DIESE ZEILE IST NEU!!! Change the title to the new image title
$('#' + data.useZoom + ' img').attr('title', event.data.attr('title'));

// Init a new zoom with the new images.                
$('#' + event.data.data('relOpts').useZoom).CloudZoom();
return false;

2) Falls nicht schon drin, muss title="{$image->comment}" oder was auch immer in die Links der Vorschaubilder.
(ist normalerweise aber schon drin.)

Damit klappt's bei mir.

Offline

#8 30. August 2011 12:31

Hmelk
probiert CMS/ms aus
Registriert: 07. April 2011
Beiträge: 76

Re: Gallery und Cloud-Zoom

Jetzt geht es, danke!


Hmelk

Offline

#9 03. November 2011 09:30

noober
arbeitet mit CMS/ms
Registriert: 26. April 2011
Beiträge: 151

Re: Gallery und Cloud-Zoom

das werde ich demnächst auch mal in eine Seite einarbeiten, danke fürs diese Beschreibung.

Offline

#10 09. Februar 2012 11:15

rolwalca
arbeitet mit CMS/ms
Registriert: 27. April 2011
Beiträge: 104

Re: Gallery und Cloud-Zoom

hallo Klenkes,

Super Anleitung. Hat tatsächlich sofort geklappt. Sehr schön!

Daumen hoch!

Offline

#11 05. November 2013 16:28

nicmare
Server-Pate
Registriert: 15. Dezember 2010
Beiträge: 1.314
Webseite

Re: Gallery und Cloud-Zoom

irgendwie klappt das mit der gallery nicht mehr. Du hast es ja wie in version 1 gelöst: http://www.professorcloud.com/mainsite/ … m-test.htm

Aber ich benutze nun version 3. Und da bekomme ich es partout nicht zum laufen! Also Cloudzoom geht. Aber mir gelingt es nicht, mit Links andere Fotos für Cloudzoom zu laden.

Ich finde dazu auch nichts in der Dokumentation. Ich hasse sowas!
So starte ich Cloudzoom:

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('#cloudzoom').CloudZoom({
			zoomPosition: 'inside',
			captionSource: '',
			easing: 1,
			zoomOffsetX: 0,
			galleryEvent:'mouseover'
		}); 
	});
</script>
    <a class="cloudzoomcontainer" href="neolog_bild1_schwarz.jpg"><img id="cloudzoom" src="neolog_bild1_schwarz_small.jpg" alt="" /></a></p>

Das Klappt soweit. Aber bei der Gallery hörts auf:

<a class="cloudzoom-gallery" rel="useZoom:'cloudZoom', smallImage: 'neolog_bild2_schwarz.jpg'" href="neolog_bild2_schwarz_small.jpg" title=""><img class="cloudzoom-gallery" src="neolog_bild2_schwarz.jpg" width="56" height="56" alt="" /></a>
<a class="cloudzoom-gallery" rel="useZoom:'cloudZoom', smallImage: 'neolog_bild3_schwarz.jpg'" href="neolog_bild3_schwarz_small.jpg" title=""><img class="cloudzoom-gallery" src="neolog_bild3_schwarz.jpg" width="56" height="56" alt="" /></a>
<a class="cloudzoom-gallery" rel="useZoom:'cloudZoom', smallImage: 'neolog_bild4_schwarz.jpg'" href="neolog_bild4_schwarz_small.jpg" title=""><img class="cloudzoom-gallery" src="neolog_bild4_schwarz.jpg" width="56" height="56" alt="" /></a>

Hat das schon einmal jemand jüngst umgesetzt? Bekomme auch keine JS Fehler oder dergleichen…

Offline

#12 05. November 2013 17:21

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery und Cloud-Zoom

Autsch! Da gibt es schon Version 3.
Das muss ich mir die Tage genauer anschauen.

Ein erster Blick auf die Beispiele zeigt, dass die keine Links um die Gallerybilder verwenden, und den Images alle Parameter mitgeben. Auf deren Website schon!

Ich werd's morgen mal genauer anschauen.

Beitrag geändert von Klenkes (05. November 2013 17:27)

Offline

#13 05. November 2013 18:39

nicmare
Server-Pate
Registriert: 15. Dezember 2010
Beiträge: 1.314
Webseite

Re: Gallery und Cloud-Zoom

Ja, deren Beispiel verwendet die hauseigene quickStart() Methode. Die ist aber für meine Umgebung ungeeignet. Daher der traditionelle jQuery Aufruf. Und gerade in diesem Zusammenhang gibt es kein Beispiel mit einer Galerie.

Beitrag geändert von nicmare (05. November 2013 18:39)

Offline

#14 05. November 2013 20:21

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery und Cloud-Zoom

Stimmt.
Mit der Quickstartmethode funktioniert es immer.

Prinzipiell hat es bei mir nun auch funktioniert, aber mit der unschönen Methode, die Parameter alle in den Link der Gallerybilder zu schreiben. Ich hasse diese redundanten Notierungen...

Siehe so:

        <script type="text/javascript">
            CloudZoom.quickStart();
        </script>    

    </head>
    
    <body>

        <img id="cloudZoom" class="cloudzoom" src="images/small/image1.jpg" data-cloudzoom='{
           "useZoom":"#cloudZoom",
           "image":"images/small/image1.jpg",
           "zoomImage":"images/large/image1.jpg",
           "galleryEvent":"mouseover",
           "zoomPosition":"inside",
           "zoomOffsetX":0,
           "captionSource":""
            }'>

        <br/>

        <a href="#" class="cloudzoom-gallery" data-cloudzoom='{
           "useZoom":"#cloudZoom",
           "image":"images/small/image2.jpg",
           "zoomImage":"images/large/image2.jpg",
           "galleryEvent":"mouseover",
           "zoomPosition":"inside",
           "zoomOffsetX":0,
           "captionSource":""
           }'>
          <img src="images/thumbs/image2.jpg" width="56" height="56" alt="">
        </a>

        <a href="#" class="cloudzoom-gallery" data-cloudZoom='{
           "useZoom":"#cloudZoom",
           "image":"images/small/image3.jpg",
           "zoomImage":"images/large/image3.jpg",
           "galleryEvent":"mouseover",
           "zoomPosition":"inside",
           "zoomOffsetX":0,
           "captionSource":""
           }'>
          <img src="images/thumbs/image3.jpg" width="56" height="56" alt="">
        </a>

Allerdings klappt es dort nicht mehr mit dem zoomOffsetX. Das Zoombild ist stets nach rechts verschoben.
Nein. Es klappt mit dem Offset! Ich hatte INT Werte in ""

Hauptsache der Parameter "useZoom":"#cloudZoom", zeigt auf die ID des ersten Bildes.

Hier mein ganzer Quelltext mit den Bildern aus dem Cloudzoombeispiel.

Beitrag geändert von Klenkes (05. November 2013 20:32)

Offline

#15 05. November 2013 21:32

nicmare
Server-Pate
Registriert: 15. Dezember 2010
Beiträge: 1.314
Webseite

Re: Gallery und Cloud-Zoom

uff. ich mag diese data attribute einfach nicht. so siehts jetzt bei mir aus:

[== code ==]
jQuery(document).ready(function($) {
	$('#cloudzoom').CloudZoom({
			zoomPosition: 'inside',
			captionSource: '',
			easing: 10,
			zoomOffsetX: 0
	}); 
	var cloudZoom = $('#cloudzoom').data('CloudZoom');
	$('#cloudzoom').bind('click',function(){
            cloudZoom.closeZoom();
            alert("open");
            return false;
        });
        $('a.cloudzoom-gallery').bind('click',function(){
        	var smallimage = $(this).attr("rel");
        	var largeimage = $(this).attr("href");
        	cloudZoom.loadImage(smallimage,largeimage);
            return false;
        });
});

und der link:

<a class="cloudzoom-gallery" data-cloudzoom="useZoom:'#cloudzoom'" rel="small/neolog_bild1_schwarz.jpg" href="big/neolog_bild1_schwarz.jpg" title=""><img src="thumbnail/neolog_bild1_schwarz.jpg" width="56" height="56" alt="" /></a>

grundsätzlich funzt das so erstmal. aber komtm mir immernoch irgendwie umständlich vor.

Beitrag geändert von nicmare (07. November 2013 11:52)

Offline

#16 05. November 2013 21:45

nicmare
Server-Pate
Registriert: 15. Dezember 2010
Beiträge: 1.314
Webseite

Re: Gallery und Cloud-Zoom

vom entwickler habe ich via supportticket diese antwort erhalten:

        <script type="text/javascript">
            $(function(){
                // Init Cloud Zoom.
                $(".cloudzoom").CloudZoom({zoomImage: 'images/large/image1.jpg'});
                // Setup gallery elements.
                $(".gallery1").attr('data-cloudzoom',"useZoom: '.cloudzoom', image: 'images/small/image1.jpg', zoomImage: 'images/large/image1.jpg' ");
                $(".gallery2").attr('data-cloudzoom',"useZoom: '.cloudzoom', image: 'images/small/image2.jpg', zoomImage: 'images/large/image2.jpg' ");
                $(".gallery3").attr('data-cloudzoom',"useZoom: '.cloudzoom', image: 'images/small/image3.jpg', zoomImage: 'images/large/image3.jpg' ");
                $(".cloudzoom-gallery").CloudZoom();
            });
        </script>    

        <img class = "cloudzoom" src = "images/small/image1.jpg"/>
        <br/>
        <img class = 'cloudzoom-gallery gallery1' src = "images/thumbs/image1.jpg">
        <img class = 'cloudzoom-gallery gallery2' src = "images/thumbs/image2.jpg">
        <img class = 'cloudzoom-gallery gallery3' src = "images/thumbs/image3.jpg">

ist dann wohl geschmackssache!

Beitrag geändert von nicmare (05. November 2013 21:46)

Offline

#17 06. November 2013 12:45

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery und Cloud-Zoom

nicmare schrieb:

ist dann wohl geschmackssache!

Das ist wahr!

So muss man in einer Gallerytemplate den ganzen Wust 2x durchlaufen, um per counter die Einträge im jQuerycall und für die Thumbs zu erstellen.
Bis auf die zusätzlichen Klassen(.gallery1) ist wenigstens das Markup der Thumbs damit sauber.

Offline