Colorbox в галерее fotorama

Тема в разделе "Opencart", создана пользователем Ed71, 25 май 2015.

Информация :
Внимание форумчане! При создании тем, или выкладывании какой-либо информации проверьте в какой ветке форума вы находитесь! Не путайте Opencart и Opencart2. При несоблюдении данного условия выносится соответствующее наказание! И потом не говорите что вас НЕ ПРЕДУПРЕЖДАЛИ! По возможности используйте обменники mail, yandex, google, dropbox, rghost Дабы избежать просьб перезалить и проблем с рекламой!
Модераторы: ZiX
  1. Ed71

    Ed71 Постоялец

    Регистр.:
    6 янв 2015
    Сообщения:
    107
    Симпатии:
    22
    Здравствуйте, помогите, пожалуйста, разобраться. Вставил в карточку товара галерею Перейти по ссылке, изображение выводится следующим образом:

    Код:
    <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. Сейчас же, изображения просто перелистываются. Подскажите, пожалуйста, как это сделать.
     
  2. bezzubtsev

    bezzubtsev

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

    Ed71 Постоялец

    Регистр.:
    6 янв 2015
    Сообщения:
    107
    Симпатии:
    22
    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 открывается, но в нем ничего нет, просто показывается загрузка и все. И оно открывается при клике и на главном изображении, и на превью, а хотелось бы, чтобы при кликанье на превьюшках они просто показывались главным изображением. Пример можно посмотреть здесь: Перейти по ссылке
     
    Последнее редактирование: 25 май 2015
  4. bezzubtsev

    bezzubtsev

    Регистр.:
    14 май 2015
    Сообщения:
    255
    Симпатии:
    75
    Сложно будет с первого раза решить проблему. Все ваши классы игнорируются и затираются сразу же скриптами.
    Разработчики такой системы не предусмотрели. Поэтому только кастомизация под ваши цели.
    Для начала замените это
    Код:
     <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 нравится это.
  5. Ed71

    Ed71 Постоялец

    Регистр.:
    6 янв 2015
    Сообщения:
    107
    Симпатии:
    22
    Заменил, но результат такой-же, как и с кодом:

    Код:
     <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?
     
    Последнее редактирование модератором: 2 июн 2015
  6. animal_x

    animal_x

    Регистр.:
    22 июн 2012
    Сообщения:
    404
    Симпатии:
    133
    через jquery Перейти по ссылке

    Так там же все вроде понятно
    Код:
    function(){ $(this).removeClass('fotorama')
    т.е в вашем случае это должно выглядеть так примерно:
    Код:
    $('#elm').hover(
           function(){ $(this).addClass('colorbox') },
           function(){ $(this).removeClass('fotorama') }
    );
     
    Последнее редактирование модератором: 2 июн 2015
    Ed71 нравится это.
  7. Ed71

    Ed71 Постоялец

    Регистр.:
    6 янв 2015
    Сообщения:
    107
    Симпатии:
    22
    И еще такой вопрос, как сделать, чтобы стрелки навигации располагались не на главном изображении, а на полосе превьюшек, поверх них?

    Код:
    .fotorama__arr {
        position: absolute;
        width: 32px;
        height: 32px;
        top: 50%;
        margin-top: -16px;
    }
    Я изменял параметр top: 50%; на top: 110%; Стрелки опускаются, но они оказываются под превью, которые накладываются на них слоем, и стрелки не видно. Подскажите, пожалуйста, что прописать, чтобы стрелки отображались поверх превью.

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

    Код:
    <script type="text/javascript"><!--
    $image['popup'].hover(
    function(){ $(this).addClass('colorbox') },
    function(){ $(this).removeClass('fotorama') }
    );
    //--></script> 
    Так?
     
    Последнее редактирование модератором: 2 июн 2015
  8. animal_x

    animal_x

    Регистр.:
    22 июн 2012
    Сообщения:
    404
    Симпатии:
    133
    Немного не так.
    $image['popup'] - это php, он со скриптом никак не связан, сюда нужно прописать изначальный класс - fotorama, т.е .fotorama.hover
    Код:
    $('.fotorama').hover(
           function(){ $(this).addClass('colorbox') },
           function(){ $(this).removeClass('fotorama') }
    );
     
  9. Ed71

    Ed71 Постоялец

    Регистр.:
    6 янв 2015
    Сообщения:
    107
    Симпатии:
    22
    Добавил в файл product.tpl скрипт:

    Код:
    <script type="text/javascript"><!--
    $('.fotorama').hover(
           function(){ $(this).addClass('colorbox') },
           function(){ $(this).removeClass('fotorama') }
    );
    //--></script>
    
    Но что-то на странице товара ничего не происходит при наведении мыши на изображение. :-( Может я что неправильно делаю?
     
  10. animal_x

    animal_x

    Регистр.:
    22 июн 2012
    Сообщения:
    404
    Симпатии:
    133
    Дайте доступ к сайту, чтобы посмотреть. Так тяжело сказать. Можете скинуть сайт в личку или поставить хайд.
     
    Ed71 нравится это.