Грабим слайдер на примере.
Добавлено: 31 авг 2016, 19:07
И снова здравствуйте!
Понадобилось мне значит спарсить новости с сайта 112.ua, а у них в некоторых записях используется слайдер.
На примере такой статьи ТЫК и рассмотрим.
Обычно я выравниваю картинки по центру, и соответственно такого рода записи выглядят не очень
Попробуем исправить это дело.
Нам понадобится плагин Nivo Image Slider (репо)
Исходный код слайдера имеет вид
(я специально зацепил со страницы блок <div class="clear"></div> (который к слайдеру отношения не имеет), но к нему мы привяжемся делая шаблон обработки).
Итак.
Сначала сделаем шаблон обработки для контейнера <div id="gallery-0" class="royalSlider rsDefaultInv">
Шаблон поиска
Шаблон замены
- атрибут theme – это собственно внешний вид слайдера. Всего их три. Посмотрите описание к слайдеру.
Далее делаем шаблон для обработки картинок
Шаблон поиска
Шаблон замены
Тут я специально взял первую ссылку на картинку, т.к. по этой ссылке картинки ровно обрезаны (585x351). Если взять за основу ссылки на оригинальные картинки, то слайдер у нас будет менять высоту при смене слайда. Поэкспериментируйте чтобы понять о чем это я.
После всего вышеописанного, мы имеем такой вид слайдера у себя на сайте
Минус в том, что так как у нас картинки вставляются не тегом <img, а шорткодом плагина, то при отсутствии других картинок в статье, миниатюру записи мы не получим.
На этом все. Успехов.
P.S. Буду благодарен, если кто нибудь подскажет галерею (на худой конец слайдер) которую сожно было-бы использовать, вставляя в запись картинки в виде
Понадобилось мне значит спарсить новости с сайта 112.ua, а у них в некоторых записях используется слайдер.
На примере такой статьи ТЫК и рассмотрим.
Обычно я выравниваю картинки по центру, и соответственно такого рода записи выглядят не очень
Попробуем исправить это дело.
Нам понадобится плагин Nivo Image Slider (репо)
Исходный код слайдера имеет вид
Код: Выделить всё
<div id="gallery-0" class="royalSlider rsDefaultInv">
<div>
<img class="rsImg" src="https://img.112.agency/585x351/2016/08/29/255675.jpeg" data-rsBigImg="https://img.112.agency/original/2016/08/29/255675.jpeg" alt=""
itemtype="httpss://schema.org/ImageObject" itemprop="associatedMedia" itemscope="" itemid="https://img.112.agency/original/2016/08/29/255675.jpeg" itemtype="https://schema.org/ImageObject"/>
<meta itemprop="url" content="https://img.112.agency/original/2016/08/29/255675.jpeg">
<meta itemprop="width" content="931">
<meta itemprop="height" content="695">
<figure class="rsCaption">
Фото: <a href="https://www.president.gov.ua/administration/apu-info">администрация президента Украины</a>
</br> </figure>
<img width="96" height="55" class="rsTmb" src="https://img.112.agency/231x131/2016/08/29/255675.jpeg">
</div>
<div>
<img class="rsImg" src="https://img.112.agency/585x351/2016/08/29/255676.jpeg" data-rsBigImg="https://img.112.agency/original/2016/08/29/255676.jpeg" alt=""
itemtype="httpss://schema.org/ImageObject" itemprop="associatedMedia" itemscope="" itemid="https://img.112.agency/original/2016/08/29/255676.jpeg" itemtype="https://schema.org/ImageObject"/>
<meta itemprop="url" content="https://img.112.agency/original/2016/08/29/255676.jpeg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="635">
<figure class="rsCaption">
Фото: <a href="https://www.president.gov.ua/administration/apu-info">администрация президента Украины</a>
</br> </figure>
<img width="96" height="55" class="rsTmb" src="https://img.112.agency/231x131/2016/08/29/255676.jpeg">
</div>
<div>
<img class="rsImg" src="https://img.112.agency/585x351/2016/08/29/255677.jpeg" data-rsBigImg="https://img.112.agency/original/2016/08/29/255677.jpeg" alt=""
itemtype="httpss://schema.org/ImageObject" itemprop="associatedMedia" itemscope="" itemid="https://img.112.agency/original/2016/08/29/255677.jpeg" itemtype="https://schema.org/ImageObject"/>
<meta itemprop="url" content="https://img.112.agency/original/2016/08/29/255677.jpeg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="581">
<figure class="rsCaption">
Фото: <a href="https://www.president.gov.ua/administration/apu-info">администрация президента Украины</a>
</br> </figure>
<img width="96" height="55" class="rsTmb" src="https://img.112.agency/231x131/2016/08/29/255677.jpeg">
</div>
<div>
<img class="rsImg" src="https://img.112.agency/585x351/2016/08/29/255678.jpeg" data-rsBigImg="https://img.112.agency/original/2016/08/29/255678.jpeg" alt=""
itemtype="httpss://schema.org/ImageObject" itemprop="associatedMedia" itemscope="" itemid="https://img.112.agency/original/2016/08/29/255678.jpeg" itemtype="https://schema.org/ImageObject"/>
<meta itemprop="url" content="https://img.112.agency/original/2016/08/29/255678.jpeg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="623">
<figure class="rsCaption">
Фото: <a href="https://www.president.gov.ua/administration/apu-info">администрация президента Украины</a>
</br> </figure>
<img width="96" height="55" class="rsTmb" src="https://img.112.agency/231x131/2016/08/29/255678.jpeg">
</div>
</div>
<div class="clear"></div>
Итак.
Сначала сделаем шаблон обработки для контейнера <div id="gallery-0" class="royalSlider rsDefaultInv">
Шаблон поиска
Код: Выделить всё
|<div id="gallery[^>]+>(.*?)<div class="clear">|is
Код: Выделить всё
[nivo-slider theme='dark']$1[/nivo-slider]
Далее делаем шаблон для обработки картинок
Шаблон поиска
Код: Выделить всё
|<img class="rsImg.*?src="(.*?)".*?>|is
Код: Выделить всё
[nivoslides image_link='$1']
После всего вышеописанного, мы имеем такой вид слайдера у себя на сайте
Минус в том, что так как у нас картинки вставляются не тегом <img, а шорткодом плагина, то при отсутствии других картинок в статье, миниатюру записи мы не получим.
На этом все. Успехов.
P.S. Буду благодарен, если кто нибудь подскажет галерею (на худой конец слайдер) которую сожно было-бы использовать, вставляя в запись картинки в виде
Код: Выделить всё
<div class="">
<img src="картинка" width="" height="" alt="">
<img src="картинка" width="" height="" alt="">
<img src="картинка" width="" height="" alt="">
</div>