Cloud Zoom Hakkında
Merhabalar,
Öncelikle bu modül anlatımlarını yapan arkadaşlar sitede var. Konulara bir kaç sorum ve sistemin nasıl çalıştığına anlamak ve üzerinde opencarta kurmaya çalışanlar için bir çözüm bulmalarını sağlamak istiyorum.
Header.tpl
Kod:
<script type="text/javascript" src="catalog/view/javascript/jquery/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/cloud-zoom.1.0.2.min.js"></script>
<link rel="stylesheet" href="catalog/view/javascript/jquery/cloud-zoom.css" type="text/css">
Java ve css dosyaları header yükledim.
Sonraki aşamaya geldi sıra...
product.tpl
Kod:
<div class="zoom-section">
<div class="zoom-small-image"><a href="<?php echo $popup; ?>" class = "cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>"></a></div></div>
Olarak mevcut 1. kullanılan fotoğraf için eklendi.
Dikkatinizi çekmek istediğim kısım "
position: 'inside'," yani innerzoom olarak gözükmesini istiyorum.
Ama Şu varki ürünlerin diğer açılardan da çekilen fotoğrafları mevzut. Bunlar içinde küçük fotoğrafların bulunduğu kısım editledim.
Kod:
<a href='<?php echo $thumb; ?>' class='cloud-zoom-gallery' title='<?php echo $heading_title; ?>'
rel="useZoom: 'zoom1', smallImage: '<?php echo $image['popup']; ?>' ">
<img src="<?php echo $image['thumb']; ?>" alt = "<?php echo $heading_title; ?>"/>
Bu kısımda eklendi.
Sistemin çalışması için ;
1- İlk gösterilen ürün boyutu 500x500 olarak ayarlanmıştır.
2- Mouse üzerine geldiğinde innerzoom olarak uygulanacak fotoğrafın boyutu 900x900 olarak ayarlanmıştır.
Birincil foto 500x500 gözükmektedir.
İnner Zoom
Sorun Bir! : İnnerzoom birincil fotoğrafa sorunsuz olarak zoomlamaktadır. küçük fotoğraflardan 2. ve 3. tıklandığında. Birincil yerine fotoğraf geçmektedir. Ama fotoğraf boyutu 500x500 olarak değilde 900x900 olarak gözükmektedir.
Sorun1 Fotoğraflar;
2. ürün birinci fotonun yerine geldi ama ebatlar 900x900 px
Sorun İki! : İnnerzoom birincil fotoğrafa sorunsuz olarak zoomlamaktadır. küçük fotoğraflardan 2. ve 3. tıklandığında. Birincil yerine fotoğraf geçmektedir. İnnerzoom efekti için üzerine getirdiğimizda mouse birincil fotoğrafı zoomlamaktadır. Birincil fotoğraf 500x500 olduğundan birden fazla ürün sıralamaktadır.
Sorun2 Fotoğraflar;
2. ürün birinci fotonun yerine geldi ve innerzoom'da gözüken birinci foto
Sorunun mantık olarak oluşma nedenleri;
1- inner uygulanacak fotoğraf "
<?php echo $image['popup']; ?>" olarak linklendirilmelidir. 900x900 px olarak ayarlanmıştır. Admin panelinden.
2 - inner birinci fotoğrafta aşağıdaki kodları incelerseniz sorunsuz ve innerzoom aktif çünki mantığa uygun...
<div class="zoom-section">
<div class="zoom-small-image"><a href="
<?php echo $popup; ?>" class = "cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>"></a></div></div>
3 - 2. fotoğrafa tıklandığında boyutlar da sorun oluşmaktadır aşağıdaki gibi kodları uyguladığımda.
<a href='<?php echo $thumb; ?>' class='cloud-zoom-gallery' title='<?php echo $heading_title; ?>'
rel="useZoom: 'zoom1', smallImage: '<?php echo $image['popup']; ?>' ">
<img src="<?php echo $image['thumb']; ?>" alt = "<?php echo $heading_title; ?>"/>
Bende kodları birincil deki gibi uyguladım yani;
Kod:
<a href='<?php echo $thumb; ?>' class='cloud-zoom-gallery' title='<?php echo $heading_title; ?>'
rel="useZoom: 'zoom1', smallImage: '<?php echo $thumb; ?>' ">
<img src="<?php echo $image['thumb']; ?>" alt = "<?php echo $heading_title; ?>"/></a>
üzerine tıklandığında birinci fotoğraf gibi ebatlarda açmasını giriyorum. İnner fotoğrafı yükleyemiyor.
Çözüm olarak sizce nasıl bir yol izlemeliyim ?
Benim düşüncem. ; <?php echo $popup; ?> 900x900 şeklinde fotoğraf ayarladım ve birincil için uygulamıştım. Bununla birlikte yeni bir fotoğraf boyutlandırma değişgeni oluştursam. Mesela : <?php echo $popup2; ?>
bunun ebatlarını 500x500 ayarlasam. tıklandığında birincil yerine yüklense, <?php echo $popup3; ?> olarakta bir tane daha açsam. onuda 900x900 olarak ayarlayıp 2 fotoğraf için inner olarak kullansam?
Birde yeni özel bir resim boyutlandırma değişkeni nasıl oluşturabilirim?
Konu hakkında düşüncelerinizi veya önerilerinizi bekliyorum. Çok site gezdim. Opencart olarak yapılmış sitelere kimsede inner uygulanmamış. Görüş ve önerilerinizi paylaşarak bunu çözeceğimize inanıyorum.
Şimdiden teşekkür ediyorum.