Sağ Tarafta Kayan Rasgele Ürünler

debreli · 18 Şub 2011

ilk önce aşağıdaki adreteki modulu kuruyoruz
http://forum.opencart-tr.com/thread-2943.html

modulu anasayfada gösteri işaretliyoruz

acıyoruz catalog/view/theme/default/module/randomroller_home.tpl altdakiyle değiştiriyoruz

Kod:

<!--*******************carusel modification start***************************-->
<script type="text/javascript" src="catalog/view/javascript/carusel/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/carusel/skins/tango/skin2.css" />
<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 4,
        wrap: 'circular',
		scroll: 2,
		vertical: 1,
        initCallback: mycarousel_initCallback
    });
});

</script>
<!--**************************carusel modification end****************************-->
<div style="border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius:10px;border:1px solid #000;right:1px;padding:2px 2px;position:fixed;top:165px;background:#333333"><center>
  <div id="wrap">
    <?php if ($products) { ?>
    <ul id="mycarousel" class="jcarousel-skin-tango">
      <?php foreach ($products as $product) { ?>
      
	  <li>
        <td valign="top"  style="width:1px"><center><a href="<?php echo str_replace('&', '&', $product['href']); ?>"><img src="<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>" style="padding: 1px; border: 1px solid #DDDDDD;"/></a><br>
        <a href="<?php echo str_replace('&', '&', $product['href']); ?>"><span style="color: #fff;"><?php echo $product['name']; ?></span></a>
          <?php if ($display_price) { ?>
          <br />
          <?php if (!$product['special']) { ?>
          <span style="font-size: 13px; color: #FF9900;"><b><?php echo $product['price']; ?></b></span>
          <?php } else { ?>
           <span style="font-size: 13px; color: #F00;"><b><?php echo $product['special']; ?></b></span>
          <?php } ?>
          
          <?php } ?>
          </center></td></li>
     
      <?php } ?>
     </ul>
    <?php } ?>
	</div>
  </div></center></div>

dosya içersindeki
auto: 4, (4 yazan yeri 0 yaparsanız resimler sabit durur.)
scroll: 2,(modulde kaç adet resim hareket ettirmek istiyorsanız o sayıyı yazınız)

açıyoruz catalog/view/javascript/carusel/skins/tango/skin2.css
altdakiyle değiştiriyoruz

Kod:

#wrap {
    color: #333333;
    /*margin: 0 12%;*/
    margin: 0px 0px;
}
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #333333;
    border: 1px solid #333333;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
	direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 120px;
    padding: 5px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width:  100px;
    background:#333333;
    height: 260px;
    padding: 35px 15px;
	
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  120px;
    height: 120px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  110px;
    height: 260px;
	float: center;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 100px;
    height: 120px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
	margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
	margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 50px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(slideitmoo_forward.png) no-repeat;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 50px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(slideitmoo_back.png) no-repeat;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

css dosyasıyla boyut ve ebadını istediğiniz birşekilde ayarlayabilirsiniz.
gifleride skins2 css dosyasının olduğu klasörün içine kopyalıyoruz
catalog/controller/module/randomroller.php dosyasını açın

bulun

Kod:

'image'   		=> $this->model_tool_image->resize($image, 38, 38),

38 değerlerini 70 olarak değiştirin..

kursadberkkan · 30 Ocak 2012

Teşekkürler yolun başındakilere çok emeği geçenlerdensiniz

Saygılar

Sağ Tarafta Kayan Rasgele Ürünler

debreli

OpenCart-TR

kursadberkkan

OpenCart-TR