Как получить ссылку для перехода на страницу с активацией определенного раздела галереи (сделанного на jquery)?

Question

[Руслан Магомедов]

Написал на HTML сайт - vertigo-mebel.ru.
На нем, в разделе "Наши работы", есть галерея, сделанная на fancybox с исп. jquery (использовал готовую галерею).
На главной странице внизу сделал сетку из 8 картинок, которые должны вести на страницу с галерей и активировать соответствующий раздел. Только вот галерея на jquery, а разделы не являются ссылками. Я в jquery вообще ничего не шарю, а сайт попросил сделать знакомый.

Подскажите пожалуйста, как сделать так, чтобы при нажатии на ссылку, открывалась эта страница и активировался определенный раздел?

Answer 1

[DmitrySorokin]

Так, если по простому совсем делать, то можно попробовать такой вариант:
1. Дописать всем ссылкам на главной странице в атрибут href соответствующий параметр(можно также реализовать через куку, но такой вариант будет проще):
href="gallery.html"
заменить на

href="gallery.html?kl1"
href="gallery.html?kl2"
href="gallery.html?kl3"
...
href="gallery.html?obiv"

итд.

2. Далее, уже на странице с галереей нужно этот параметр прочитать из урла. Если параметр совпадает, симулируем нажатие на соответствующий фильтр:

$( document ).ready(function() {
    if(window.location.href.indexOf("kl1") > -1) {// ищем в урле параметр
     $('[data-category="kl1"]').click(); //симулируем нажатие на выбор категории на странице с галереей
    } else if(window.location.href.indexOf("kl2") > -1){
$('[data-category="kl2"]').click(); //симулируем нажатие на выбор категории на странице с галереей
} .... (window.location.href.indexOf("obiv") > -1){
$('[data-category="obiv"]').click(); //симулируем нажатие на выбор категории на странице с галереей
} 
});

Answer 2

[Руслан Магомедов]

Посмотрите пожалуйста, может я что-то не так сделал, нужный раздел все равно не активируется.

В файле index.html изменил:

<div class="content-folio">
        <br><p>Наши работы:</p><br><br>
        <div class="folio-cards">
          <a href="gallery.html?kl1">
           <div class="folio-card" id="Iklass">
            <img src="images/gallery/1klass/k1%20(1).jpg" alt="">
           <h2><span>I класс</span></h2>
        </div></a>
        <a href="gallery.html?kl2">
        <div class="folio-card">
            <img src="images/gallery/2klass/k2%20(1).jpg" alt="">
           <h2><span>II класс</span></h2>
        </div>
        <a href="gallery.html?kl3">
        <div class="folio-card">
            <img src="images/gallery/3klass/k3%20(1).jpg" alt="">
           <h2><span>III класс</span></h2>
        </div></a>
        <a href="gallery.html?kozh">
        <div class="folio-card">
            <img src="images/gallery/kozh/k%20(12).jpg" alt="">
           <h2><span>Кожаная<br>мебель</span></h2>
        </div></a>
        <a href="gallery.html?pered">
        <div class="folio-card">
            <img src="images/gallery/pered/p%20(1).jpg" alt="">
           <h2><span>Реставрация<br>с переделкой</span></h2>
        </div></a>
        <a href="gallery.html?dom">
        <div class="folio-card">
            <img src="images/gallery/dom/dom%20(12).jpg" alt="">
           <h2><span>Мелкий ремонт<br>на дому</span></h2>
        </div></a>
        <a href="gallery.html?exc">
        <div class="folio-card">
            <img src="images/gallery/exc/e%20(1).jpg" alt="">
           <h2><span>Мебель<br>на заказ</span></h2>
        </div></a>
        <a href="gallery.html?obiv">
        <div class="folio-card">
            <img src="images/gallery/obiv/o%20(3).jpg" alt="">
           <h2><span>Кровати с<br>мягкой обивкой</span></h2>
        </div></a>                        
        </div>
    </div>

В файле gallery.html, в конец документа, перед закрывающим тегом body добавил:

$( document ).ready(function() {
   if(window.location.href.indexOf("kl1") > -1) {
   $('[data-category="kl1"]').click();
   } else if(window.location.href.indexOf("kl2") > -1){
   $('[data-category="kl2"]').click();
   } (window.location.href.indexOf("obiv") > -1){
   $('[data-category="obiv"]').click();
   } 
   });

Также пробовал вынести в отдельный .js файл и подключить его к сайту, но тоже не помогло.

Comments

[DmitrySorokin]

$( document ).ready(function() {
   if(window.location.href.indexOf("kl1") > -1) {
   $('[data-category="kl1"]').click();
   } else if (window.location.href.indexOf("kl2") > -1){
   $('[data-category="kl2"]').click();
   } else if (window.location.href.indexOf("obiv") > -1){
   $('[data-category="obiv"]').click();
   } 
   });

попробуй так. Был недописан второй "else if"

[DmitrySorokin]

если все будет ок, то тебе нужно добавить в скрипте проверку на остальные разделы меню