Highslide und XTC

[bigfoot]

Hallo Leute,

wir würden gerne das Highslide script in unseren Shop integrieren. Nach langem rumspielen gibt es bisher noch keinen Erfolg zu verbuchen. Hat evtl. jemand Erfahrung bzw eine kleine Anleitung wie man das Highslide script in einen XT-Commerce integriert? Gewünscht wären Thumbnails der product_listing sowie die Bilder in der produkt_info.

Tausend Dank schonmal.

Gruß

[supervisior]

/includes/module/product_info.php
----------------------------------
finde folgendes:

PHP-Code:

 $image = '';
  if ($product->data['products_image'] != '')
   $image = DIR_WS_INFO_IMAGES.$product->data['products_image']; 


ersetze es mit:

PHP-Code:

$image = '';
  $popup_image = '';
  if ($product->data['products_image'] != '') {
   $image = DIR_WS_INFO_IMAGES.$product->data['products_image'];
   $popup_image = DIR_WS_POPUP_IMAGES.$product->data['products_image'];
  } 


----------------------------------
finde folgendes:

PHP-Code:

$info_smarty->assign('PRODUCTS_IMAGE', $image); 


und füge danach ein:

PHP-Code:

$info_smarty->assign('PRODUCTS_POPUP_IMAGE', $popup_image); 


----------------------------------
finde folgendes:

PHP-Code:

$info_smarty->assign('PRODUCTS_IMAGE_'.$img['image_nr'], $mo_img); 


und ersetze es mit:

PHP-Code:

$popup_image = DIR_WS_POPUP_IMAGES.$img['image_name'];
$info_smarty->assign('PRODUCTS_IMAGE_'.$img['image_nr'], $mo_img);
$info_smarty->assign('PRODUCTS_POPUP_IMAGE_'.$img['image_nr'], $popup_image); 


----------------------------------
----------------------------------
----------------------------------
/templates/xtc4/module/product_info/product_info_v1.html
----------------------------------
finde folgendes:

PHP-Code:

   <tr>
                          <td>{if $PRODUCTS_IMAGE!=''}<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="prodImg" />{/if}</td>
                        </tr> 


und ersetze es mit:

PHP-Code:

<tr>
                          <td><a href="{$PRODUCTS_POPUP_IMAGE}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'caption1'}{/literal})"><img src="{$PRODUCTS_IMAGE}" alt="Highslide JS" title="Click to enlarge" /></a></td>
                        </tr> 


----------------------------------
finde folgendes:

PHP-Code:

{if $PRODUCTS_IMAGE_1 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">                          
                          <a href="{$PRODUCTS_POPUP_LINK_1}"><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME}" /></a>                          
                          </td>
                        </tr>
      {/if}     
                        {if $PRODUCTS_IMAGE_2 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">
                          <a href="{$PRODUCTS_POPUP_LINK_2}"><img src="{$PRODUCTS_IMAGE_2}" alt="{$PRODUCTS_NAME}" /></a>                          
                          </td>
                        </tr>  
      {/if}
      {if $PRODUCTS_IMAGE_3 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">                          
                          <a href="{$PRODUCTS_POPUP_LINK_3}"><img src="{$PRODUCTS_IMAGE_3}" alt="{$PRODUCTS_NAME}" /></a>                          
                          </td>
                        </tr>  
      {/if} 


und ersetze es mit:

PHP-Code:

{if $PRODUCTS_IMAGE_1 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">   
                          <a href="{$PRODUCTS_POPUP_IMAGE_1}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_1}" alt="Highslide JS" title="Click to enlarge" /></a>                       
                          </td>
                        </tr>
      {/if}     
                        {if $PRODUCTS_IMAGE_2 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">
                          <a href="{$PRODUCTS_POPUP_IMAGE_2}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_2}" alt="Highslide JS" title="Click to enlarge" /></a>                                                 
                          </td>
                        </tr>  
      {/if}
      {if $PRODUCTS_IMAGE_3 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">                          
                          <a href="{$PRODUCTS_POPUP_IMAGE_3}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_3}" alt="Highslide JS" title="Click to enlarge" /></a>                                                 
                          </td>
                        </tr>  
      {/if} 


----------------------------------
finde folgendes:

PHP-Code:

<!-- more images eof -->                                                                   
                      </table> 


und füge danach ein:

PHP-Code:

<div class='highslide-caption' id='the-caption'>
                      {if $PRODUCTS_IMAGE_3 != '' && $PRODUCTS_IMAGE_1 != '' && $PRODUCTS_IMAGE_1 != ''}
    <a href="#" onclick="return hs.previous(this)" class="control" style="float:left; display: block">
     Rückwärts
     <br/>
     <small style="font-weight: normal; text-transform: none">linke Pfeiltaste</small>
    </a>
 <a href="#" onclick="return hs.next(this)" class="control" 
   style="float:left; display: block; text-align: right; margin-left: 50px">
  Vorwärts
  <br/>
  <small style="font-weight: normal; text-transform: none">rechte Pfeiltaste</small>
 </a>
 {/if}
    <a href="#" onclick="return hs.close(this)" class="control">Schließen</a>
    <div style="clear:both"></div>
</div> 


----------------------------------
----------------------------------
/includes/header.php
----------------------------------
finde folgendes:

PHP-Code:

if (strstr($PHP_SELF, FILENAME_POPUP_IMAGE )) {
?> 


und füge davor ein:

PHP-Code:

if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO ) || $_GET['cat'] != '' || $_GET['manufacturers_id'] != '' || $_GET['keywords'] != '') {
?>
<script type="text/javascript" src="includes/highslide/highslide.js"></script>
<script type="text/javascript">    
    hs.graphicsDir = 'includes/highslide/graphics/';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>
<?php
}

----------------------------------
----------------------------------
----------------------------------
/includes/classes/produt.php
----------------------------------
finde folgendes (ca. Zeile 392)

PHP-Code:

return array ('PRODUCTS_NAME' => $array['products_name'], 


und füge davor ein:

PHP-Code:

$popup_image = DIR_WS_POPUP_IMAGES.$array['products_image']; 


----------------------------------
finde folgendes:

PHP-Code:

'PRODUCTS_IMAGE' => $this->productImage($array['products_image'], $image), 


und füge danach ein:

PHP-Code:

'PRODUCTS_POPUP_IMAGE' => $popup_image, 


----------------------------------
----------------------------------
----------------------------------
/templates/xtc4/module/product_listing/product_listing_v1.html
----------------------------------
finde folgendes:

PHP-Code:

<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a> 


und ersetze es mit:

PHP-Code:

<a href="{$module_data.PRODUCTS_POPUP_IMAGE}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$module_data.PRODUCTS_IMAGE}" alt="Highslide JS" title="Click to enlarge" class="prodImg" /></a> 


----------------------------------
finde folgendes:

PHP-Code:

<td align="left" class="main"><a href="{$module_data.PRODUCTS_LINK}"><strong>{$module_data.PRODUCTS_NAME}</strong></a></td>
          </tr> 


und füge danach ein:

PHP-Code:

<div class='highslide-caption' id='the-caption'>
   <a href="#" onclick="return hs.close(this)" class="control">Schließen</a>
      <div style="clear:both"></div>
  </div> 


----------------------------------
----------------------------------
----------------------------------
Anmerkung:
Für den Fall, das man in der Produktdetailansicht nur das Standardbild angeziegt werden soll, aber
trotzdem durch alle weiteren Bilder durchgegangen werden soll muß folgende Änderung vollzogen werden:
/templates/xtc4/module/product_info/product_info_v1.html
----------------------------------
finde folgendes:

PHP-Code:

      {if $PRODUCTS_IMAGE_1 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">   
                          <a href="{$PRODUCTS_POPUP_IMAGE_1}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_1}" alt="Highslide JS" title="Click to enlarge" /></a>                       
                          </td>
                        </tr>
      {/if}     
                        {if $PRODUCTS_IMAGE_2 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">
                          <a href="{$PRODUCTS_POPUP_IMAGE_2}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_2}" alt="Highslide JS" title="Click to enlarge" /></a>                                                 
                          </td>
                        </tr>  
      {/if}
      {if $PRODUCTS_IMAGE_3 != ''}
                        <tr>
                          <td style="border-top: 1px solid; border-color: #cccccc;">                          
                          <a href="{$PRODUCTS_POPUP_IMAGE_3}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_3}" alt="Highslide JS" title="Click to enlarge" /></a>                                                 
                          </td>
                        </tr>  
      {/if} 


und ersetze es mit:

PHP-Code:

{if $PRODUCTS_IMAGE_1 != ''}
                        <tr>
                          <td><div style="display:none">   
                          <a href="{$PRODUCTS_POPUP_IMAGE_1}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_1}" alt="Highslide JS" title="Click to enlarge" /></a>                       
 
      {/if}     
                        {if $PRODUCTS_IMAGE_2 != ''}
 
                          <a href="{$PRODUCTS_POPUP_IMAGE_2}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_2}" alt="Highslide JS" title="Click to enlarge" /></a>                                                 
 
      {/if}
      {if $PRODUCTS_IMAGE_3 != ''}
 
                          <a href="{$PRODUCTS_POPUP_IMAGE_3}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_3}" alt="Highslide JS" title="Click to enlarge" /></a>                                                 
                          </div></td>
                        </tr>  
      {/if} 


----------------------------------
----------------------------------
----------------------------------

Obige Anleitung setzt das Highslide Script im Verzeichnis /includes/highslide voraus. Für diese Anleitung gibt es keinen Support und keine Gewähr auf Funktionalität. Das Highslide Script ist zwar Open Source, jedoch sollte man den Entwickler für seine Arbeit belohnen und ihm die 28$ schon zukommen lassen.

[polkhigh33]

den Entwickler für seine Arbeit belohnen und ihm die 28$ schon zukommen lassen

es sind 29$

geht auch um einiges einfacher.....
die popup-images bekommt man in den template-datein auch mit z.b.{$PRODUCTS_IMAGE|regex_replace:"/info_images/":"popup_images"} ....
da kann man sich das gecode in den php-datein sparen

[supervisior]

dann schreib ne anleitung, weil mit dem wortfetzen kann ein unbedarfter nix anfangen

[polkhigh33]

war auch nur als an-regung und nicht als an-leitung gemeint.

[supervisior]

Stimmt, ist ja der Community Bereich, da "supported" ihr ja nicht...!

[Vio]

Leider doppelt...

[Vio]

Zitat von supervisior

Stimmt, ist ja der Community Bereich, da "supported" ihr ja nicht...!

Willst Du damit sagen, dass es im Supportbereich eine Anleitung geben wird?
Da bin ich mal gespannt
Grüße
Vio

Danke für die ausführliche Beschreibung

[bigfoot]

Vielen Dank für die Super Anleitung.

Eine Frage hätten wir noch. In der Produktinfo wird jetzt nur ab dem zweiten/dritten/vierten Bild usw. die Navigation(vor - zurück) vom Highslide angezeigt. Beim Hauptbild fehlt die Navigation. Ist das korrekt oder haben wir irgendwo einen Fehler gemacht?

Danke.

Gruß

[supervisior]

Na ihr müsst die Anleitung schon auch lesen und nicht nur einfach machen, was da steht. Nehmt den letzten Schritt der Anleitung wieder raus, dann sollte es auch bei dem ersten Bild gehen.