DevCodeSnippets: imagezoom_skript.diff

modi-art-wai/plugins/jquery.image_preview.js

@@ +1 @@
+/*
+ * Url preview script 
+ * powered by jQuery (http://www.jquery.com)
+ * 
+ * written by Alen Grakalic (http://cssglobe.com)
+ * 
+ * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
+ *
+ */
+ 
+this.imagePreview = function(){ 
+        /* CONFIG */
+                
+                xOffset = 10;
+                yOffset = 30;
+                
+                // these 2 variable determine popup's distance from the cursor
+                // you might want to adjust to get the right result
+                
+        /* END CONFIG */
+        $("a.preview").hover(function(e){
+                this.t = this.title;
+                this.title = "";        
+                var c = (this.t != "") ? "<br/>" + this.t : "";
+                $("body").append("<p id='preview'><img src='"+ this.rel +"' alt='"+ this.title +"' />"+ c +"</p>");                                                              
+                $("#preview")
+                        .css("top",(e.pageY - xOffset) + "px")
+                        .css("left",(e.pageX + yOffset) + "px")
+                        .fadeIn("slow");
+    },
+        function(){
+                this.title = this.t;    
+                $("#preview").remove();
+    }); 
+        $("a.preview").mousemove(function(e){
+                $("#preview")
+                        .css("top",(e.pageY - xOffset) + "px")
+                        .css("left",(e.pageX + yOffset) + "px");
+        });                     
+};
+
+
+// starting the script on page load
+$(document).ready(function(){
+        imagePreview();
+});

modi-art-wai/settings.conf

@@ -100 +100 @@
 /* Hersteller anzeigen */
 show_manufacturer = 0
+
+/* ImagePreview (Bilderzoom fÃŒr Listenansichten) aktivieren? */
+article_list_imagezoom = 1

modi-art-wai/tpl_inc/article_list_article.tpl

@@ -26 +26 @@
         <h3><a href="{$Artikel->cURL}"{if $article_title} title="{$article_title|escape:"html"|truncate:80}"{/if}>{$Artikel->cName}</a></h3>
         <ul>
-                <li class="picture"><a href="{$Artikel->cURL}"{if $article_title} title="{$article_title|escape:"html"|truncate:80}"{/if}>{image alt=$Artikel->cName src=$Artikel->cVorschaubild}</a></li>
+                <li class="picture"><a href="{$Artikel->cURL}" class="preview"{if $Artikel->Bilder[0]->cPfadNormal} rel="{$Artikel->Bilder[0]->cPfadNormal}"{/if}{if $article_title} title="{$article_title|strip_tags|truncate:80}"{/if}>{image alt=$Artikel->cName src=$Artikel->cVorschaubild}</a></li>
                 
                 <li class="buy_box">

modi-art-wai/tpl_inc/global_inc_first.tpl

@@ -32 +32 @@
         
 
-{if $Einstellungen.artikeldetails.artikeldetails_tabs_nutzen=="Y" || #use_articlebox_sliders# == 1}
+{if $Einstellungen.artikeldetails.artikeldetails_tabs_nutzen=="Y" || #use_articlebox_sliders# == 1 || #article_list_imagezoom#==1}
         <script type="text/javascript" src="{$currentTemplateDir}plugins/jquery-1.2.3.pack.js"></script>
+        {if #article_list_imagezoom#==1 && ($body_id eq "p_article_list" || $body_id eq "p_search")}
+                <script type="text/javascript" src="{$currentTemplateDir}plugins/jquery.image_preview.js"></script>
+        {/if}
 {/if}
 {if #use_articlebox_sliders# == 1}

modi-art-wai/css/content.css

@@ -612 +612 @@
 }
 
+#preview{
+        position:absolute;
+        border:1px solid #ccc;
+        background:#fff;
+        padding:5px;
+        display:none;
+        z-index: 50;
+}
+
 /*      ***
         Article Detail