PhotoSwipe configuration

The v.1.0.1 version of the Quark template introduces support for the PhotoSwipe gallery.

Demo gallery is available here.

In order to create the gallery, you will need to use a special structure based on the gk-cols structure enhanced by few elements:

<div class="gk-cols gk-gallery" data-cols="3">
<div>
CONTENT OF THE FIRST COLUMN
</div>
<div>
CONTENT OF THE SECOND COLUMN
</div>
<div>
CONTENT OF THE THIRD COLUMN
</div>
</div>

In the above code the structure of the gk-cols is different due adding additional CSS class - gk-gallery. This class is necessary for the PhotoSwipe script.

The content of the columns is generated by adding following links:

<a 
   href="/images/demo/gallery/image1.jpg" 
   data-size="1280x1280" 
   data-title="Modern clock" 
   data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."
>
   <img src="/images/demo/gallery/thumb1.jpg" alt="Thumbnail I" />
</a>

Every link contains few important elements:

  • Url to the full image in the href attribute.
  • Thumbnail image as the img tag inside the link.
  • Dimensions of the full image in the data-size attribute of the link.
  • Title of the slide (optional) as the data-title attribute of the link.
  • Description of the slide (optional) as the data-desc attribute of the link.

Full gallery code is visible below:

<div class="gk-cols gk-gallery" data-cols="3">
<div>
<a href="/images/demo/gallery/image1.jpg" data-size="1280x1280" data-title="Modern clock" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb1.jpg" alt="Thumbnail I" /></a>
<a href="/images/demo/gallery/image2.jpg" data-size="1280x853" data-title="Painting love" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb2.jpg" alt="Thumbnail II" /></a>
<a href="/images/demo/gallery/image3.jpg" data-size="1164x872" data-title="Green Barrel" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb3.jpg" alt="Thumbnail III" /></a>
<a href="/images/demo/gallery/image4.jpg" data-size="1280x853" data-title="Wooden doors" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb4.jpg" alt="Thumbnail IV" /></a>
<a href="/images/demo/gallery/image5.jpg" data-size="852x1280" data-title="Japanese dinner" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb5.jpg" alt="Thumbnail V" /></a>
</div>
<div>
<a href="/images/demo/gallery/image6.jpg" data-size="853x1280" data-title="Photography art" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb6.jpg" alt="Thumbnail VI" /></a>
<a href="/images/demo/gallery/image7.jpg" data-size="1280x853" data-title="Sailing in the fog" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb7.jpg" alt="Thumbnail VII" /></a>
<a href="/images/demo/gallery/image8.jpg" data-size="1280x853" data-title="Travel time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb8.jpg" alt="Thumbnail VIII" /></a>
<a href="/images/demo/gallery/image9.jpg" data-size="960x1280" data-title="For ged" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb9.jpg" alt="Thumbnail IX" /></a>
<a href="/images/demo/gallery/image10.jpg" data-size="1280x853" data-title="Summer time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb10.jpg" alt="Thumbnail X" /></a>
</div>
<div>
<a href="/images/demo/gallery/image11.jpg" data-size="1280x853" data-title="Mobile music" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb11.jpg" alt="Thumbnail XI" /></a>
<a href="/images/demo/gallery/image12.jpg" data-size="1155x1280" data-title="Guitar artist" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb12.jpg" alt="Thumbnail XII" /></a>
<a href="/images/demo/gallery/image13.jpg" data-size="873x1280" data-title="Typewriter" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb13.jpg" alt="Thumbnail XIII" /></a>
<a href="/images/demo/gallery/image14.jpg" data-size="1280x853" data-title="Morning coffee" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb14.jpg" alt="Thumbnail XIV" /></a>
<a href="/images/demo/gallery/image15.jpg" data-size="1280x848" data-title="Fitness time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb15.jpg" alt="Thumbnail XV" /></a>
</div>
</div>
Last modification: Чт 5 фев 2015
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available
Slider

О нас

Казахскую гастрономию часто называют «кухней холодного стола». Сохраняя лучшие традиции казахского народа, компания «Асыл -Агро» производит колбасные изделия (включая национальные казахские деликатесы) и мясные консервы. Отличительная особенность продуктов компании «Асыл-Агро» – отсутствие усилителей вкуса. При производстве не используются искусственные добавки, увеличивающие срок хранения продукта. Всю продукцию отличает натуральный вкус, приятный аромат и натуральный состав.

Самые свежие продукты
Отличительной особенностью магазинов является предложение покупателям свежего ассортимента колбасной и консервной продукции собственного производства.
Широкий ассортимент
На данный момент в продаже доступны более 10 видов колбасных изделий, а также 4 видов консервных, двое из которых - новшества для Казахстанского рынка.
Самые низкие цены
В наших магазинах низкие цены на продукцию благодаря собственной сырьевой базе и высокотехнологичному производству.
Шаговая доступность
На данный момент весь ассортимент компании присутствует на коммунальном рынке «Сарайчик», также планируется открытие собственных магазинов.
Высокий уровень сервиса
В наших магазинах работает грамотный внимательный персонал. Основная задача магазинов – удовлетворить потребность жителей района в свежих продуктах для ежедневного потребления.
Экологические чистые продукты
Для приготовления колбас и мясных полуфабрикатов не используются консерванты и ГМО! Вся продукция имеет декларацию о соответствии и Сертификат Халяль.
Image is not available

Консервные изделия

Slider
Консервные изделия
Image is not available

650 тг / шт

Image is not available

ВЕРБЛЮЖАТИНА

Image is not available

600 тг / шт

Image is not available

Говядина

Image is not available

750 тг / шт

Image is not available

Конина

Image is not available

750 тг / шт

Image is not available

Баранина

previous arrow
previous arrow
next arrow
next arrow
Slider
Image is not available

Колбасные изделия

Slider
Колбасные изделия
Image is not available

1 300 тг / кг

Image is not available

Сардельки молочные

Image is not available

1 000 тг / кг

Image is not available

Докторская

Image is not available

1 200 тг / кг

Image is not available

Сосиски молочные

Image is not available

1 400 тг / кг

Image is not available

Мусульманская

Image is not available

1 200 тг / кг

Image is not available

Краковская

Image is not available

1 200 тг / кг

Image is not available

Одесская

Image is not available

1 500 тг / кг

Image is not available

Армавирская

Image is not available

2 500 тг / кг

Image is not available

Печеночная

Image is not available

1 400 тг / кг

Image is not available

Чесночная

Image is not available

1 200 тг / кг

Image is not available

Восточная Конская

Image is not available

1 100 тг / кг

Image is not available

Говяжья

Image is not available

3 300 тг / кг

Image is not available

Курдюк

Image is not available

2 850 тг / кг

Image is not available

Шужык

previous arrow
previous arrow
next arrow
next arrow
Slider
Image is not available
Image is not available
Image is not available

Контакты

Мы будем рады ответить на все Ваши вопросы.

Ежедневно с 10 до 19

Адрес

Адрес

Телефоны

E-mail

г. Атырау, Северная
Промзона 49

kxasyl-agro@mail.ru
sales@assyl-agro.kz

+7 778 020 7628
+7 701 712 9371

Slider
×