{Giúp với} giúp mình khi click vào ảnh sản phẩm sẽ đưa vào trang nội dung sản phẩm

Thảo luận trong 'Hướng dẫn - Hỏi đáp' bắt đầu bởi newcentury214, 7/9/16.

  1. newcentury214

    newcentury214 Mới tham gia

    Bài viết:
    2
    Likes :
    0
    Mình xài Joomla 1.5.26.
    Trang mình hiện tại khi click vào ảnh sản phẩm nó hiện ra ảnh lớn. Mình muốn khi click vào ảnh sản phẩm nó sẽ đưa mình vào trang nội dung của sản phẫm luôn, giống như khi mình click vào tên sản phẩm vậy đó. Các bạn giúp mình với, mình code gà quá......
    Mình thấy trong mục components\com_product\views\sanpham\tmpl có file default.php. Code như thế này :

    <?php defined('_JEXEC') or die('Restricted access'); ?>

    <style>
    a.tooltip {outline:none; }
    a.tooltip strong {line-height:30px;}
    a.tooltip:hover {text-decoration:none;}
    a.tooltip span {
    z-index:100;display:none; padding:14px 20px;
    margin-top:10px; margin-left:-60px;
    width:300px; line-height:16px;
    }

    a.tooltip:hover span{
    display:inline; position:absolute;
    border:2px solid #FFF; color:#EEE;
    background:#333 url(<?php echo JURI::root()?>templates/thienke-template/images/css-tooltip-gradient-bg.png) repeat-x 0 0;
    }

    .callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}

    /*CSS3 extras*/
    a.tooltip span
    {
    border-radius: 15px 15px 15px 15px;
    box-shadow: 0px 0px 8px 4px #666;
    /*opacity: 0.8;*/
    }
    </style>

    <style>
    .lightbox {
    z-index:1000;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, .8);
    }

    .lightbox_table {
    width:100%;
    height:100%;
    }

    .lightbox_table_cell {
    vertical-align:middle;
    }
    </style>

    <!-- LIGHTBOX CODE BEGIN -->
    <div id="lightbox" class="lightbox" style="display:none" onclick="document.getElementById('lightbox').style.display='none';">
    <table class="lightbox_table">
    <tr>
    <td class="lightbox_table_cell" align="center">
    <div id="lightbox_content" style="width: 40%; background-color:white; border:5px solid black;">
    <!-- insert by script -->
    </div>
    </td>
    </tr>
    </table>
    </div>

    <!-- LIGHTBOX CODE END -->

    <?php foreach ($this->arrSanPham as $key => $items):?>
    <?php
    $link_cat = JRoute::_( 'index.php?option=com_product&controller=sanpham&task=viewCat&cid='. $key );
    ?>

    <div class="module" style="background-image: url('templates/minhquang-template/images/bg-menu-top.png'); background-repeat: repeat-x;">
    <div>
    <div>
    <div>
    <h3 style="background: none ; color: #d8af61; font-weight: normal;">
    <span style="background-image: url('templates/minhquang-template/images/module_header_emo1.png');
    background-position: left;
    background-repeat: no-repeat; float: left; width: 200px; padding-left: none;">
    <?php echo JText::_('PRODUCT'); ?> <?php echo $this->arrDanhmuc[$key]?>
    </span>
    <a href="<?php echo $link_cat; ?>" style="text-decoration: none; color: red; position: relative; float: right; padding: 1px 10px 0px 0px;"><?php echo JText::_('MORE_DELTAIL'); ?></a>
    </h3>

    <div>
    <?php
    for ($i=0, $n=count( $items ); $i < $n; $i++):
    $row =& $items[$i];
    $link = JRoute::_( 'index.php?option=com_product&controller=sanpham&task=viewProduct&cid='. $row->id );
    ?>

    <div style="width:206px;float: left;">
    <div style="padding: 8px 8px 0px 8px;
    background-image: url('templates/minhquang-template/images1/product_footer.jpg');
    background-position: center bottom; background-repeat: no-repeat;">
    <a onclick="document.getElementById('lightbox_content').innerHTML = fnInsertContent<?php echo $row->id; ?>(); document.getElementById('lightbox').style.display='inline';" class="tooltip">
    <img style="width: 190px;height:220px;" alt="<?php echo $row->ten_san_pham; ?>" src="<?php echo $row->hinh_anh; ?>">
    <span>
    <img class="callout" src="<?php echo JURI::root()?>templates/thienke-template/images/callout_black.gif"/>
    <h4 style="color: #EEE;"><?php echo $row->ten_san_pham; ?></h4><hr>
    <?php echo $row->mo_ta; ?>
    </span>
    </a>

    <script type="text/javascript">
    function fnInsertContent<?php echo $row->id; ?>(){
    return '<img style="width: 100%;" alt="<?php echo $row->ten_san_pham; ?>" src="<?php echo $row->hinh_anh; ?>">'
    }
    </script>
    </div>

    <div style="padding: 8px 8px 8px 8px; text-align: center;">
    <a href="<?php echo $link;?>" style="color: #d8af61;"><?php echo $row->ten_san_pham; ?></a>
    </div>
    </div>

    <?php if($i % 3 == 3):?>
    <div style="width: 100%; height: 1px;"></div>
    <?php endif;?>

    <?php
    endfor;
    ?>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div style="width: 100%; height: 10px;"></div>
    <?php endforeach;?>

    <script type="text/javascript">
    var tooltips = document.querySelectorAll('.tooltip span');
    window.onmousemove = function (e) {
    var CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    CurX = CurX - 70;
    CurY = CurY + 24;
    var x = CurX + 'px',
    y = CurY + 'px';
    for (var i = 0; i < tooltips.length; i++) {
    tooltips.style.top = y;
    tooltips.style.left = x;
    }
    };
    </script>



    Không biết có phải edit ở đây không, và edit như thế nào, mọi người giúp mình với nha
     
    Last edited: 7/9/16
  2. suminhtrien

    suminhtrien Mới tham gia

    Bài viết:
    7
    Likes :
    0
    nhìn code mà choáng :D
     
  3. suminhtrien

    suminhtrien Mới tham gia

    Bài viết:
    7
    Likes :
    0
    bạn dùng js ak
     
comments powered by Disqus
: joomla 1.5

Chia sẻ trang này