Forum für CMS/made simple

Klenkes

Server-Pate

Ort: 89428 Syrgenstein

Registriert: 17. Dezember 2010

Beiträge: 1.437

Gallery und MagicZoom

Dies ist ein kleines HowTo, welches zeigen soll, wie einfach es ist Tools wie MagicZoom mit Gallery einzusetzen.

Was ist MagicZoom?

So sieht es hinterher aus:(wenigstens bei mir)

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

Was braucht man:
1) Die Javascriptdatei von Magiczoom(Link oben) Magiczoom ist nicht 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.

 Hier klicken, um den Code zum Kopieren zu markieren

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

{foreach from=$images item=image name=imglist}
{* Hiermit wird das erste Bild aus dem Array $images gezeigt *}
{if $smarty.foreach.imglist.first}
<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" class="MagicZoom" 
rel="zoom-width:400; zoom-height:300; opacity-reverse: false; zoom-fade:true; zoom-fade-in-speed: 1200; zoom-fade-out-speed: 800; selectors-effect-speed: 1200; selectors-effect:fade;" 
id="zoom" title="{$image->comment}">
<img src="{supersizer path=$image->file|escape:'url'|replace:'%2F':'/' width='180' url=1}" alt="{$image->titlename}" width="180" />
</a>

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

{* Die Vorschaubilder *}
<div id="previewimg">

{foreach from=$images item=image}
<!-- Vorschaubild -->
{* rev= muss die Referenz auf das mittlere Bild haben, und wird mit Supersizer erzeugt *}
<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" rel="zoom-id:zoom;" rev="{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:

 Hier klicken, um den Code zum Kopieren zu markieren

/*
   Magic Zoom v3.1.24 
   Copyright 2011 Magic Toolbox
   Buy a license to use Magic Scroll on your site.
   Go to www.magictoolbox.com/magiczoom/
*/

.MagicZoom img {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}

/* Style of zoomed window */
.MagicZoomBigImageCont {
border: none;
}

/* Style of header, activated with "title" attribute in <a> tag */
.MagicZoomHeader {
font-family:Verdana,Arial, sans-serif;
font-size: 11px !important;
line-height: normal !important;
color: #fff;
background-color: #979493;
text-align: center !important;
}

/* Style of small square under mouse */
.MagicZoomPup {
border: 1px solid #aaa;
background: #fff;
cursor: move;
}

/* Style of message box while image is loading */
.MagicZoomLoading {
border: 1px solid #ccc;
background: #fff url(images/ajax-loader.gif) no-repeat 2px 50%;
padding: 4px 4px 4px 24px !important;
margin: 0;
text-decoration: none;
text-align: left;
font-size: 8pt;
font-family: sans-serif;
color: #444;
}


#previewimg           {clear:left; 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;}

a.MagicZoom {float:left; margin-right:20px;}
p#bildtext {float:left; width:250px;}

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

 Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="js/magiczoom.js"></script>

Man kann hier natürlich auch ein statisch verlinktes Stylesheet angeben, wenn man das CSS nicht in Gallery haben will.

Damit sollte es funktionieren!

Auf der Website von MagicZoom kann man 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.
Und Nein! Ich bin weder der Entwickler, noch verdiene ich daran Geld. Ich finde es nur toll 

Wer die ganzen Parameter nicht im rel="" Attribut des Links haben will, kann die Konfiguration auch im Template vorher machen:

 Hier klicken, um den Code zum Kopieren zu markieren

{literal}
<script type="text/javascript">
MagicZoom.options = {
 'opacity': 30,
 'move-on-click':true,
 'PARAMETER': WERT,
};
</script>
{/literal}

Tipp:
Wer für MagicZoom nicht bezahlen will kann auch auf kostenlose Varianten zurückgreifen, wie z.B. CloudZoom
Funktioniert im Prinzip genau so.

Das war mein erstes HowTo. Hoffentlich war es einigermaßen verständlich.

Beitrag geändert von Klenkes (07. April 2011 16:57)

Wurst2008

Gast

Re: Gallery und MagicZoom

Sehr sogar, danke dafür.

markus

probiert CMS/ms aus

Registriert: 05. Januar 2011

Beiträge: 70

Re: Gallery und MagicZoom

Das nenne ich mal einfach, Danke Server-Pate. 

---

Ach was soll`s

mörml

Server-Pate

Registriert: 23. Januar 2011

Beiträge: 443

Re: Gallery und MagicZoom

Cool!!!!

---

kann CMSms buchstabieren...

CMSms 1.11.12
PHP 5.5.14