Opencart 2.x Ürün Detayda Prettyphoto Kurulumu Yapımda

[By_Surmeneli]

merhaba arkadaşlar bugün sizlerle birlikte opencart 2.x vesiyonlarına ait ürün detayda resim görüntüleyici olarak lighbox modifikayonunu inceleyeceğiz. magnifyzoom'a nazaran daha kullanışlı ve biraz daha özellilkli bir resim görüntüleme modifiyesidir. Bu eklenti vqmod olarakta çalışmaktadır. xml dosyasını vqmod/xml klasörüne atınız. ve catalog dosyasınıda ana dizinine atınız. vqmod kullanmak istemeyenler içinse anlatıma başlıyoruz.



dosyamızı açalım: catalog/view/theme/seninteman/template/product/

product.tpl

bulalım :

<?php echo $footer; ?>

üst satırına ekleyelim :

 <script type="text/javascript" src="catalog/view/javascript/prettyphoto/prettyphoto/jquery.prettyPhoto.min.js"></script>
      <link rel="stylesheet" type="text/css" href="catalog/view/javascript/prettyphoto/prettyphoto/prettyPhoto-min.css" media="screen" />

dosyamızı açalım : catalog/view/theme/seninteman/template/product/

product.tpl

bulalım :

<?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>

Değiştirelim :

<?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" rel="prettyPhoto[pp_gal]"><img src="<?php echo $thumb; ?>" rel="prettyPhoto[pp_gal]" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" rel="prettyPhoto[pp_gal]"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>

Bulalım :

<?php echo $footer; ?>

Bir üst satırına ekleyiniz.

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({animation_speed: 'fast', /* fast/slow/normal */
			slideshow: 5000, /* false OR interval time in ms */
			autoplay_slideshow: false, /* true/false */
			opacity: 0.80, /* Value between 0 and 1 */
			show_title: true, /* true/false */
			allow_resize: true, /* Resize the photos bigger than viewport. true/false */
			default_width: 500,
			default_height: 344,
			counter_separator_label: "/", /* The separator for the gallery counter 1 "of" 2 */
			theme: 'dark_rounded', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
			horizontal_padding: 20, /* The padding on each side of the picture */
			hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
			wmode: 'opaque', /* Set the flash wmode attribute */
			autoplay: true, /* Automatically start videos: True/False */
			modal: false, /* If set to true, only the close button will close the window */
			deeplinking: false, /* Allow prettyPhoto to update the url to enable deeplinking. */
			overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
			keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
			changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
			callback: function(){}, /* Called when prettyPhoto is closed */
			ie6_fallback: true
      });
});
</script>

İşlem tamamdır, tek yapacağınız geri kalan işlem catalog klasörünü sitemizin ana dizinine atalım işlem tamamdır.


Kaynak :e-ticaretdersleri

[video=youtube]https://www.youtube.com/watch?v=NRcqG0gZwQg[/video]​