MODUL: Cloud Zoom als Alternative zu MagicZoom

[infobewerber]

Hi Guys,

danke für das super Tool!  

Was muss ich machen, um den Cloud Zoom auf der Liveshopping Seite (http://www.modified-shop.org/forum/index.php?topic=4455.msg45363#msg45363) anzeigen zu lassen?

Muß der Pfad in der: /templates/xtc5/javascript/general.js.php geändert werden?

Code: PHP  [Auswählen]

<?php
if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO )) {
?>

 

Ein Tipp von Euch wäre für mich Gold wert!

Vielen Dank im Voraus
Grüße

[daluniz]

Hallo...

das ganze ist echt super nur wie kann man einstellen das sich die kleinen Vorschaubilder nicht an der Einstellung "Breite der Artikel-Thumbnails" und "Höhe der Artikel-Thumbnails" orientieren?!?!

die weiteren Produktbilder sollen in der "Vorschau" zb nur 50x50 sein ..

hoffe mir kann schnell jemand helfen

schonmal DANKE !

[Aragorn45]

Hallo
Habe schon einiges ausprobiert um das Cloud Zoom in das Fenster für das Liveshopping zu aktivieren doch ohne erfolg.

Kann mir einer helfen das es im Liveshopping Fenster auch aktiv ist :

Grüße

[Gradler]

Dann schau mal in Deine general.js.php - laut Anleitung ist die cloud-zoom.1.0.2.min.js nur für Produkt Info Seiten aktiv. Hier müsstest Du für das Live Shopping Modul erweitern.

[Aragorn45]

Hallo Gradler
  Das war es was mir noch dafür fehlte.

Grüße

[Aragorn45]

Hallo
Zu früh gefreut....ist nur wenn inaktiv weil er dann die Vorlage von der Produkt Info nimmt.

Was muss man den ändern in der general.js.php :

[Aragorn45]

Hallo
Also soweit bin ich....Man muss die "cloud-zoom.1.0.2.min.js" in die live_shopping.htlm einbinden dann hat mit Cloud Zoom in laufenden Live Shopping. Was noch nicht klappt ist zusätzliche Bilder. Da sind fehler wenn man sie reinsetzt. Vielleicht weiss einer Rat :

[Gradler]

Schau doch noch einmal in die clud zoom Einbauanleitung. Da steht doch, daß bei den weiteren Bildern ein Block getauscht werden muß. Analog dazu machst Du es halt in der Bilderanzeige der für das Live Shopping zuständigen Datei (da wo Du die .js Datei eingebunden hast).

[Aragorn45]

Hallo Gradler
So hatte ich auch gedacht weil in der info geht es ja mit dem block. Das gleiche funktioniert aber nicht in der shopping. Selbst wenn ich einiges änder geht es nicht , entweder kommen fehler oder ein weisses Bild.
Habe jetzt erstmal die weiteren Bilder für die Live_shopping aus gestellt bis sich eine Lösung findet

[FuSin]

Hallo,

ich finde leider keine Konfiguration für die Größe der Lupe, nicht das Vergrößerungsfenster.
Weiß jemand bitte einen Rat ?

Hallo,

vielleicht habe ich die Antwort auf diese Frage von Simon einfach übersehen , aber:
Die mitgelieferte Readme1st.txt-Datei beinhaltet eine Verlinkung zu den Parameter, die dem Script übergeben werden können. Die URL ist leider tot, evtl. befindet sich die richtige Anleitung jetzt hier: http://www.starplugins.com/cloudzoom/quickstart

Unter anderem werden dort die für die Größe der Lupe verantwortlichen Parameter 'lensWidth' und 'lensHeight' aufgelistet, die ... überhaupt nichts bewirken. Wenigstens solange nicht bis man die 'zoomWidth' und 'zoomHeight' entfernt. Dann allerdings stimmen die eingetragenen Werte für die Lupe auch nicht.
Hat jemand es bereits hingekriegt, die Werte für Breite und Höhe von der Lupe und von dem gezoomten Bild separat richtig einzustellen?

[downset]

Seltsames Problemchen...

Cloud Zoo, eingebaut...so weit so gut. Funktioniert alles. Nur leider fehlt die Möglichkeit die Thickbox "durchzublätter" - sprich beim Click auf ein Artikelbild wird das dann zwar in die Thickbox geladen aber unten die Pfeile sind nicht mehr da um zum nächsten Bild zu kommen.

Keine Ahnung ob das am Einbau des Cloud Zooms lag. War lange Zeit unbemerkt...

Gruß

Jens

[uwet]

habe das template jgruen_2015
und habe Cloud_Zoom_V.1.2.zip für meine Produktbilder eingebunden,
leider passt es nicht ganz, könnte mir jemand helfen und es auf inner zoom anpassen, so wie hier
[ Für Gäste sind keine Dateianhänge sichtbar ]

Code: Text  [Auswählen]

<div class="zoom-wrapper">
<div class="zoom-left">
<img style="border:1px solid #e8e8e6;" id="zoom_mw" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg" width="411">

</div>
<div class="zoom-right">
<h3><a name="mousewheel">Mousewheel Zoom</a></h3>
<p>
You can scroll over the image to zoom in closer!

</p>
<a href="#" rel="view_script_mw" class="view_source">HIDE THE CODE</a>

</div>
<div style="clear:both;"></div>
<script type="text/javascript">
$(document).ready(function () {
              $("#zoom_mw").elevateZoom({
            scrollZoom : true
                        });

    });


</script>

Code: PHP  [Auswählen]

<h2>Inner Zoom</h2>
                <p>Using the <code>zoomPosition: 'inside'</code> property, the lens can be made invisible for a full size inner zoom effect.</p>
                <p>Also, using the <code>autoInside: true</code> property, inside mode can happen automatically if the page gets narrow on mobile devices.</p>  
                <div class="text-center">
                    <img class="cloudzoom" src="/sites/starplugins/images/jetzoom/small/image7.jpg" data-cloudzoom="
                         zoomImage:'/sites/starplugins/images/jetzoom/large/image7.jpg',
                         zoomPosition:'inside', zoomOffsetX:0 " alt="Cloud Zoom small image">

[Herr_Bert]

Guten Tag,
ist es möglich dieses Tool nur auf Bildschirmen ab einer bestimmten Größe arbeiten zu lassen?
Ich nutze auch das responsive jgruen_2015, aber auf einem Handy-Display ist einfach zu wenig Platz um ein Produktbild zu zoomen, da reicht die Thickbox völlig aus.

Herr_Bert

[noRiddle (revilonetz)]

Media-Query benutzen ?
...und bei einer gewissen Größe des Bildschirms den Zoom-Container ausblenden (ist es .zoom-wrapper ?)
Beispiel:

Code: CSS  [Auswählen]

@media only screen and (max-width: XXpx) {
.zoom-wrapper {display:none;}
}

Wenn man außerdem das zugehörige Javascript gar nicht erst laden will kann man das
- insofern das Javascript nicht mit allen anderen JS komprimiert wird -
mittles jQuery nicht laden.
Beispiel:

Code: Javascript  [Auswählen]

var wW = window.innerWidth ? window.innerWidth : $(window).width();
if(wW <= XX) {
CODE
}

XX ist dann der Wert den du auch in der Media-Query benutzt.

Gruß,
noRiddle

[Herr_Bert]

Hallo noRiddle und vielen Dank für die Antwort,
in der zum Modul gehörenden cloud-zoom.css sieht es so aus:

Code: PHP  [Auswählen]

.cloud-zoom-wrap {
        margin: 0 auto;
        width:980px;
        background-color:#fff;
        border: #fff solid;
        border-width:0px 10px 10px 10px;
        margin-bottom:10px;
}
.cloud-zoom-hint {
        font-size:11px;
        font-weight:normal;
        font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
        border: 4px solid #888;
        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:4px solid #ccc;
        overflow:hidden;
}
/* This is the loading message. */
.cloud-zoom-loading {
        color:white;
        background:#222;
        padding:3px;
        border:1px solid #000;
}
.zoom-tiny-image {
        border:1px solid #CCC;
        margin:0px;

}
.zoom-tiny-image:hover {
        border:1px solid #0099FF;
}

Muß ich die Anpassung/en unter .cloud-zoom-wrap hinzufügen, muß ich da alle Bildschirmgrößen für das kein zoom zur Verfügung stehen soll einzeln eingeben, oder gibt es auch einen von - bis Bereich?

Herr_Bert