COVID2019 и это вот все. Друзья, вся эта история начинает плохо пахнет. Мойте руки, не ходите в люди. Отложите все плановые покупки и положите в носок заначку. Заприте ваших родителей, бабушек-дедушек на даче. Лучше перебдеть чем недобдеть. Берегите себя!

Скролинг дополнительных изображений в карточке товара с помощью owl


19th

Recommended Posts

еще подсказали, меняем:

img src=

на:

img class="lazyOwl" data-src=

class="lazyOwl"  -  справедливо для owl версий 1.3.2(3), для других версий уточнять. Что дает: Картинки загружаются не сразу, а по мере необходимости (видимости), что облегчает вес страницы и увеличивает скорость её загрузки.

Ссылка на комментарий
Поделиться на других сайтах

  • 1 year later...
В 19.02.2016 at 08:35, 19th сказал:

еще подсказали, меняем:


img src=

на:


img class="lazyOwl" data-src=

class="lazyOwl"  -  справедливо для owl версий 1.3.2(3), для других версий уточнять. Что дает: Картинки загружаются не сразу, а по мере необходимости (видимости), что облегчает вес страницы и увеличивает скорость её загрузки.

Не подскажете какой класс для 2.1

Ссылка на комментарий
Поделиться на других сайтах

  • 2 weeks later...

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

Ссылка на комментарий
Поделиться на других сайтах

  • 4 years later...
В 18.02.2016 at 13:37, 19th сказал:
<?php if ($images) { ?>
				<div id="owl-demo" class="owl-carousel owl-theme">
					<?php foreach ($images as $image) { ?>
						<div class="item">
							<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
						</div>
					<?php } ?>
				</div>
      <?php } ?>

Второй день "воюю". Может поможет кто, как адаптировать код с отображением превьюшек ниже...

<li class="row">
										<div class="image-additional col-xs-3 col-sm-2">
											<a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" data-thumb="<?php echo $thumb; ?>" data-key="0">
												<img src="<?php echo $small; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" class="img-responsive" />
											</a>
										</div>
										<?php foreach ($images as $key => $image) { ?>
											<div class="image-additional col-xs-3 col-sm-2">
												<a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" data-thumb="<?php echo $image['small']; ?>" data-key="<?php echo $key+1; ?>">
													<img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" class="img-responsive" />
												</a>
											</div>
										<?php } ?>
										
									</li>

 

Ссылка на комментарий
Поделиться на других сайтах

25 минут назад, kusttt сказал:

Второй день "воюю". Может поможет кто, как адаптировать код с отображением превьюшек ниже...

 

Сайт покажите, без ссылки на сайт никто не может.

Ссылка на комментарий
Поделиться на других сайтах

5 минут назад, BuslikDrev сказал:

Сайт покажите, без ссылки на сайт никто не может.

Сайт на локалке. Автор хака для примера взял часть кода из дефолт шаблона, я - выложил свой "кусок". Как бы все то же самое, но "наугад" переставляя куски кода - не получается результат, а навыков программирования нет.

Ссылка на комментарий
Поделиться на других сайтах

Победил.

<div id="owl-demo" class="image-additional " >
    
                                       <div class="image-additional ">
<a class="thumbnail"  href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" data-thumb="<?php echo $thumb; ?>" data-key="0">
<img class="img-responsive" src="<?php echo $small; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>"/></a>
                                        </div>
                                        
                                        
                    <?php foreach ($images as $key => $image) { ?>
                        <div>
<a class="thumbnail"   href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"data-thumb="<?php echo $image['small']; ?>" data-key="<?php echo $key+1; ?>" >
<img class="img-responsive" src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" class="img-responsive" /></a>
                        </div>

<?php } ?>
</div>

 

Ссылка на комментарий
Поделиться на других сайтах

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Ответить в тему...

×   Вы вставили отформатированное содержимое.   Удалить форматирование

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.