Colorbox в галерее fotorama

[Ed71]

Здравствуйте, помогите, пожалуйста, разобраться. Вставил в карточку товара галерею Для просмотра ссылки Войди или Зарегистрируйся, изображение выводится следующим образом:

<div class="product-info">
  <?php if ($thumb || $images) { ?>
  <div class="left">
  <div class="fotorama" data-width="370" data-ratio="370/370" data-max-width="100%"  data-nav="thumbs"  data-swipe="false"  data-fit="cover">
  <?php if ($images) : //Product Thumbnails ?>
             <?php foreach ($images as $image) : ?>
  <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb1']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>  
  
  <?php endforeach; ?>
  <?php endif; ?>  

  <?php } ?>
</div>
</div>

Все работает, но мне нужно, чтобы при кликах на превью изображения перелистывались, а при клике на главном изображении, оно открывалось в окне colorbox. Сейчас же, изображения просто перелистываются. Подскажите, пожалуйста, как это сделать.

 

[bezzubtsev]

Я по коду не вижу вывод главного изображения. Только превью (Product Thumbnails). Дополните код. И приложите куски кода JS файла, которые отвечают у вас за colorbox и листание.
Идеально, если ещё и ссылку на саму галерею укажите. Тогда быстрее смогу помочь.

 

[Ed71]

Bezzubtsev, спасибо Вам за ответ. Изображение выводится вот этим кодом:

<?php echo $image['popup']; ?>.

Все остальное не работает, т.е., когда я убирал этот код

title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb1']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>"

,

то все работало, как и с ним.

Вот рабочий код:

  <div class="product-info">
        <div class="left">
    <div class="fotorama" data-width="370" data-ratio="370/370" data-max-width="100%"  data-nav="thumbs"   data-fit="cover" data-thumbheight="70px" data-thumbwidth="70px" data-autoplay="true">
                
                        <?php foreach ($images as $image) : ?>
                            <a href="<?php echo $image['popup']; ?>"/></a>                        
                          
                        <?php endforeach; ?>
                  

    </div>
    </div>

За листание отвечает fotorama.js, выше я давал ссылку на архив с галереей, там этот файл и файл стилей. А colorbox у меня стандартный в ocstore. Вот я и хочу их как-то совместить, но пока не особо получается. Пробовал прописать изображению два класса

<div class="product-info">
        <div class="left">
    <div class="fotorama colorbox" data-width="370" data-ratio="370/370" data-max-width="100%"  data-nav="thumbs"   data-fit="cover" data-thumbheight="70px" data-thumbwidth="70px" data-autoplay="true">
               
                        <?php foreach ($images as $image) : ?>
                            <a href="<?php echo $image['popup']; ?>"/></a>                       
                         
                        <?php endforeach; ?>
                 

    </div>
    </div>

Тогда при клике окно colorbox открывается, но в нем ничего нет, просто показывается загрузка и все. И оно открывается при клике и на главном изображении, и на превью, а хотелось бы, чтобы при кликанье на превьюшках они просто показывались главным изображением. Пример можно посмотреть здесь: Для просмотра ссылки Войди или Зарегистрируйся

 

[bezzubtsev]

Сложно будет с первого раза решить проблему. Все ваши классы игнорируются и затираются сразу же скриптами.
Разработчики такой системы не предусмотрели. Поэтому только кастомизация под ваши цели.
Для начала замените это

 <div class="fotorama colorbox" data-width="370" data-ratio="370/370" data-max-width="100%"  data-nav="thumbs"   data-fit="cover" data-thumbheight="70px" data-thumbwidth="70px" data-autoplay="true">

на вот это

 <div class="fotorama colorbox" data-width="370" data-ratio="370/370" data-max-width="100%"  data-nav="thumbs"  data-fit="cover"
data-arrows="false"
data-click="false"
data-swipe="false"
data-thumbheight="70px" data-thumbwidth="70px" data-autoplay="false">

Пока отключим авто промотку на время, потом включим заново. Отпишитесь, как сделаете.
В итоге, любые щелчки по главным картинкам должны будут игнорироваться, а щелчки по превью должны работать также как сейчас.

 

[Ed71]

Заменил, но результат такой-же, как и с кодом:

 <div class="fotorama colorbox" data-width="370" data-ratio="370/370" data-max-width="100%"  data-nav="thumbs"   data-fit="cover" data-thumbheight="70px" data-thumbwidth="70px" data-autoplay="true">

Окно colorbox появляется при кликах и на главном, и на превью, и в нем ничего нет. Посмотрите сами.

А никак нельзя заменять класс главного изображения? Например по наведению мыши mouseover -
class="colorbox", а в обычном состоянии - class="fotorama".

Animal_x, спасибо. А не подскажете, как прикрутить этот код, чтобы при наведении мыши удалялся класс fotorama.

Или может еще какое решение есть открытия изображения в окне colorbox из fotorama?

 

[animal_x]

А никак нельзя заменять класс главного изображения? Например по наведению мыши mouseover -
class="colorbox", а в обычном состоянии - class="fotorama".

через jquery Для просмотра ссылки Войди или Зарегистрируйся

Animal_x, спасибо. А не подскажете, как прикрутить этот код, чтобы при наведении мыши удалялся класс fotorama.

Так там же все вроде понятно

function(){ $(this).removeClass('fotorama')

т.е в вашем случае это должно выглядеть так примерно:

$('#elm').hover(
       function(){ $(this).addClass('colorbox') },
       function(){ $(this).removeClass('fotorama') }
);

 

[Ed71]

И еще такой вопрос, как сделать, чтобы стрелки навигации располагались не на главном изображении, а на полосе превьюшек, поверх них?

.fotorama__arr {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 50%;
    margin-top: -16px;
}

Я изменял параметр top: 50%; на top: 110%; Стрелки опускаются, но они оказываются под превью, которые накладываются на них слоем, и стрелки не видно. Подскажите, пожалуйста, что прописать, чтобы стрелки отображались поверх превью.

$('#elm').hover(
function(){ $(this).addClass('colorbox') },
function(){ $(this).removeClass('fotorama') }
);

Animal_x cпасибо, я имел в виду, куда это добавить, в product.tpl?

<script type="text/javascript"><!--
$image['popup'].hover(
function(){ $(this).addClass('colorbox') },
function(){ $(this).removeClass('fotorama') }
);
//--></script>

Так?

 

[animal_x]

<script type="text/javascript"><!--
$image['popup'].hover(
function(){ $(this).addClass('colorbox') },
function(){ $(this).removeClass('fotorama') }
);
//--></script>

Так?

Немного не так.
$image['popup'] - это php, он со скриптом никак не связан, сюда нужно прописать изначальный класс - fotorama, т.е .fotorama.hover

$('.fotorama').hover(
       function(){ $(this).addClass('colorbox') },
       function(){ $(this).removeClass('fotorama') }
);

 

[Ed71]

Добавил в файл product.tpl скрипт:

<script type="text/javascript"><!--
$('.fotorama').hover(
       function(){ $(this).addClass('colorbox') },
       function(){ $(this).removeClass('fotorama') }
);
//--></script>

Но что-то на странице товара ничего не происходит при наведении мыши на изображение. :-( Может я что неправильно делаю?

 

[animal_x]

Добавил в файл product.tpl скрипт:
Но что-то на странице товара ничего не происходит при наведении мыши на изображение. :-( Может я что неправильно делаю?

Дайте доступ к сайту, чтобы посмотреть. Так тяжело сказать. Можете скинуть сайт в личку или поставить хайд.