RotarYMonkeY
@RotarYMonkeY
Изучаю HTML, CSS, JS и PHP

Как настроить lightbox.js?

Добрый день.
С JScript пока на Вы, по-этому прошу помощи у гуру.
Есть скрипт для всплывающего изображения в модальном окне jQuery lightBox
Прикручен в интернет-магазине. При клике на изображения товара, они открываются в модальном окне, все работает красиво и всех почти все устраивает.
Но вот какая проблема: при пролистывании изображений, он начинает показывать все изображения товаров в категории как они идут по очереди. Никак не пойму, как решить проблему.
<div class="category-list">

    <?php 

        if ( count( $categories ) <= 8 ) {

            foreach ( $categories as $k=>$category ) { 

                if( $k > 0 ) echo '';

                echo '<div id="' . $category['name'] . '">';
                echo '<h2>' . $category['name'] . '</h2>';
				echo '<ul class="product_nav bx-pager1">';
				$i=-1;
				foreach ( $products_all[ $category['category_id'] ] as $product )
                {
					echo '<li><a href="" data-slide-index="' . ++$i .'">' . $product['name'] . '</a></li>';
					echo '<li>/</li>';
				}
				echo '</ul>';
				if ($category['description']) { 
					echo  '<div class="descr_cat"> ' . $category['descriptions'] . '</div>'; 
				} 
                echo '<div id="product_s">';
				echo '<ul class="bxslider2">';
                foreach ( $products_all[ $category['category_id'] ] as $product )
                {
                    echo '<li>';
                    if ( $product['thumb'] ) {
                        echo '<div class="image"><img src="' . $product['thumb'] . '" title="' . $product['name'] . '" alt="' . $product['name'] . '" class="main_img"/>

';
                    
						foreach ($product['images'] as $image) {
							  echo '<a class="imagebox" href="'. $image['popup'] .'"  >';
								  echo '<img src="'. $image['thumb'] . '" style="width:100px;height:100px;margin:0 0 5px;" />';
							  echo '</a>';
						} 
						 echo '<div class="clr"></div>';
						 echo '</div>';
					}
                    echo '<div style="float:right;width:274px;"><div class="caption"><p>' . $product['name'] . '</p></div>';
					 if ( $product['price'] ) {
                        echo '<div class="price">';
                        if ( !$product['special'] ) { ?><span id="formated_price_<?php echo $product['product_id']; ?>" price="<?php echo $product['price_value']; ?>"><?php echo $product['price']; /**/ ?></span> <?php } 
                        else { ?><span id="formated_price_<?php echo $product['product_id']; ?>" price="<?php echo $product['price_value']; ?>"><?php echo $product['price']; /**/ ?></span><span id="formated_special_<?php echo $product['product_id']; ?>" price="<?php echo $product['special_value']; ?>"><?php echo $product['special']; /**/ ?></span> <?php }
                        if ( $product['tax'] ) { echo '<br /><span class="price-tax">' . $text_tax . ' ' . $product['tax'] . '</span>'; }
                        echo '</div>';
                    }
					?>

<div id="product_s">
  <ul class="bxslider2">
    <?php foreach ($products as $product) { ?>
    <li>
      <?php if ($product['thumb']) { ?>
      <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
      <?php } ?>
      <div class="caption"><a class="imagebox" href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
	        <?php if ($product['price']) { ?>
      <div class="price">
        <?php if (!$product['special']) { ?>
        <?php echo $product['price']; ?>
        <?php } else { ?>
        <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
        <?php } ?>
        <?php if ($product['tax']) { ?>
        <br />
        <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
        <?php } ?>
      </div>
      <?php } ?>
      <div class="description"><?php echo $product['description']; ?></div>
      <?php if ($product['rating']) { ?>
      <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
      <?php } ?>
      <div class="cart">
        <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button add_c" />
      </div>
    </li>
    <?php } ?>
  </ul>
  </div>

<script type="text/javascript">
jQuery(function(){

jQuery("li a.imagebox").lightBox({
	overlayBgColor: '#000',
	overlayOpacity: 0.6,
	imageLoading: 'catalog/view/theme/default/image/litebox/lightbox-ico-loading.gif',
	imageBtnClose: 'catalog/view/theme/default/image/litebox/lightbox-btn-close.gif',
	imageBtnPrev: 'catalog/view/theme/default/image/litebox/lightbox-btn-prev.gif',
	imageBtnNext: 'catalog/view/theme/default/image/litebox/lightbox-btn-next.gif',
	txtImage: 'Изображение',
	txtOf: 'из'
   });


});
</script>
  • Вопрос задан
  • 197 просмотров
Пригласить эксперта
Ответы на вопрос 1
Punkie
@Punkie
Лига экстрасенсов просит ссылку на сайт, ибо спиритически связаться с вашим кодом, к сожалению, не удалось.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы