Trigger button accesing a custom url - html

Question

I want to auto trigger button accesing/load to a custom url/page taking a parameter from that url/page
when the user is in domain home (homepage) and click an image href (link, button, doesn't matter) i need to be redirected and land on "domain/projects/#homes" and from there take the parameter "#homes" and autoload/autoclick/automatic trigger a button with that parameter from url.
The reason that i need this is because from homepage i have a banner with 4 photos representing the categories of projects, and the grid with filters is in the page domain/projects, so i want the user be able to click one categorie from homepage and be redirected to domain/projects and trigger a button in the grid with filters. This page is in Wordpress.
searching i have found that this can be done with jquery.
the "ul li" options/filters are selected when the class "active" is added to the "li" tag
The problems : from what i understand Wordpress have built in jquery so the "$" the simbols are replaced by "jQuery" or something like that, the other problem is that the filter and html is defined like this:
<div class="et_pb_code_inner">
<script>
jQuery(document).ready(function() {
if (window.location.search == "mharquitecto.cl/proyectos/#casas") {
$("ul.simplefilter_55 li:nth-child(1)").addClass("active");
}
/*if (window.location.search == "?return") {
p200table.button( 7 ).trigger();
}*/
});
</script>
</div>undefined</div>undefined<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_1">
<div class="et_pb_code_inner">
<!-- CSS Part Start From Here-->
<style>
.portfolio-wraper {
margin-bottom: 20px;
}
li#all {
margin: 0;
}
.simplefilter li {
margin-top: 5px;
}
.filtr-search {
margin-top: 10px !important;
width: 200px !important;
margin-bottom: 20px;
}
#all-simplefilter {
display: inline;
padding-left: 0px !important;
}
#f-simplefilter-55 {
display: inline;
padding-left: 0px !important;
}
#keyframes .YouTubePopUp-Content {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.YouTubePopUp-Content {
animation-name: .YouTubePopUp-Content;
}
.YouTubePopUp-Close {
background: url(DOMAIN/wp-content/plugins/portfolio-filter-gallery//img/close-icon-white.png) no-repeat;
background-size: 50px 50px;
-webkit-background-size: 70px 50px;
-moz-background-size: 70px 50px;
-o-background-size: 70px 50px;
}
ul.simplefilter {
margin-left: 0 !important;
}
.pfg_img_55 {
width: 100% !important;
height: 100% !important;
}
.filter_gallery_55>a {
position: initial !important;
}
.thumbnail_55 {
width: 100% !important;
height: auto;
margin-bottom: 0px !important;
}
.filtr-item {
padding-right: 7px !important;
padding-left: 7px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
.filtr-item img {
transition: all .2s !important
}
.simplefilter_55 li {
background-color: #ccc;
color: ;
}
.simplefilter_55 li:hover {
background-color: !important;
}
.simplefilter_55 li.active {
background-color: !important;
}
</style>
<div class="portfolio-wraper pfg-bootstrap" version="1.4.7">
<div class="col-lg-12 col-md-12 col-xs-12 text-center">
<ul id="all-simplefilter" class="filtr-control-55 simplefilter simplefilter_55">
<li id="all" class="active filtr-controls-55" data-filter="all">Todos</li>
</ul>
<ul id="f-simplefilter-55" class="filtr-control-55 simplefilter simplefilter_55">
<li data-filter="1" class="filtr-controls-55">Casas</li>
<li data-filter="2" class="filtr-controls-55">Arquitecturas Comerciales</li>
<li data-filter="3" class="filtr-controls-55">Quinchos</li>
<li data-filter="4" class="filtr-controls-55">Remodelaciones</li>
</ul>
</div>
<!-- Shuffle & Sort Controls -->
<div class="row loading-wrapper text-center">
<img decoding="async" src="DOMAIN/wp-content/plugins/portfolio-filter-gallery//img/loading-icon.gif" width="60">
</div>
<div class="filter_gallery_55 row filtr-container filters-div" style="opacity:0; display:none;">
<a href="DOMAIN/project/proyecto-1/" target="_blank" title="casa 1" title="casa 1">
<div data-category="1" data-sort="casa 1" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/la-vivienda-de-formas-aerodinamicas-lleva-su-relacion-con-el-agua-a-otro-nivel-de-la-mano-del-arquitecto-frances-david-tajchman-43692def-1500x871_87fab854_1200x630-300x158.jpeg" alt="">
<span class="item-desc item_desc_55">casa 1</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-1/DOMAIN/project/proyecto-2/" target="_blank" title="casa 2" title="casa 2">
<div data-category="1" data-sort="casa 2" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/4-PROYECTOS-DE-ARQUITECTURA-INNOVADORES1-1024x768-1-300x225.jpeg" alt="">
<span class="item-desc item_desc_55">casa 2</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-3/" target="_blank" title="arq com 1" title="arq com 1">
<div data-category="2" data-sort="arq com 1" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/descarga-9-300x164.jpeg" alt="">
<span class="item-desc item_desc_55">arq com 1</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-4/" target="_blank" title="arq com 2" title="arq com 2">
<div data-category="2" data-sort="arq com 2" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/hotel-OZADI_JOSE_CAMPOS_fad-arquitectura-2015-942x531-1-300x169.jpeg" alt="">
<span class="item-desc item_desc_55">arq com 2</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-5/" target="_blank" title="quincho 1" title="quincho 1">
<div data-category="3" data-sort="quincho 1" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/776_3_HR_ZeitzMOCAA_HeatherwickStudio_Credit_Iwan_Baan_View_of_Zeitz_MOCAA_in_Silo_Square-300x200.jpeg" alt="">
<span class="item-desc item_desc_55">quincho 1</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-6/" target="_blank" title="remodelacion 1" title="remodelacion 1">
<div data-category="4" data-sort="remodelacion 1" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/031-Los-100-Mejores-Proyectos-Arquitectonicos-del-Siglo-XXI-image79-300x200.jpeg" alt="">
<span class="item-desc item_desc_55">remodelacion 1</span>
</div>
</a>
</div>
</div>
<script>
setTimeout(function() {
jQuery(".thumbnail_55").each(function() {
// console.log(jQuery(this).width() + "x" + jQuery(this).height())
var h = jQuery(this).height();
var w = jQuery(this).width();
jQuery(this).height(h);
jQuery(this).width(w);
jQuery(this).resize();
});
}, 2500);
jQuery(document).ready(function(jQuery) {
jQuery('.filtr-item').addClass('animateonload');
jQuery('#filter_gallery_55').show();
jQuery('.loading-wrapper').hide();
jQuery(".loader_img").hide();
jQuery(".lg_load_more").show();
jQuery(".filtr-container").css("opacity", 1);
//Filterizd Default options
options = {
animationDuration: 0.5,
callbacks: {
onFilteringStart: function() {},
onFilteringEnd: function() {},
onShufflingStart: function() {},
onShufflingEnd: function() {},
onSortingStart: function() {},
onSortingEnd: function() {}
},
controlsSelector: '.filtr-controls-55',
filter: 'all',
filterOutCss: {
top: '0px',
left: '0px',
opacity: 0.001,
transform: ''
},
filterInCss: {
top: '0px',
left: '0px',
opacity: 1,
transform: ''
},
layout: 'sameWidth',
selector: '.filtr-item',
setupControls: false
}
var filterizd = jQuery('.filter_gallery_55').filterizr(options);
//filterizd.filterizr('sort', 'domIndex', 'desc');
jQuery('.filter_gallery_55').imagesLoaded(function() {
// images have already loaded, instantiate Filterizr
jQuery('.filter_gallery_55').filterizr(options);
});
//bootstrap-lightbox-js
// delegate calls to data-toggle="lightbox"
jQuery(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return jQuery(this).ekkoLightbox({
onShown: function() {
/* if (window.console) {
return console.log('Checking our the events huh?');
} */
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating ' + direction + '. Current item: ' + itemIndex);
}
}
});
});
jQuery('.filtr-control-55 [data-filter]').click(function() {
//jQuery('.swiper-55').swipebox('swipebox-destroy');
var targetFilter = jQuery(this).data('filter');
var lighbox_class_name = "pfg-lightbox-" + targetFilter;
jQuery('.pfg-lightbox-' + targetFilter).attr('data-lightbox', lighbox_class_name); // add data filter for parent filters
});
//Programatically call
jQuery('#open-image').click(function(e) {
e.preventDefault();
jQuery(this).ekkoLightbox();
});
jQuery('#open-youtube').click(function(e) {
e.preventDefault();
jQuery(this).ekkoLightbox();
});
// navigateTo
jQuery(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return jQuery(this).ekkoLightbox({
onShown: function() {
lb = this;
jQuery(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
// video player
jQuery(function() {
jQuery("a.video-box-55").YouTubePopUp({
autoplay: 0
}); // Disable autoplay
});
});
</script>
</div>
</div>
FIX UPDATE I've found a solution with php and with divi filterable portfolio. Here is :
$feature = new DBC_Default_Portfolio_Tab('cat1');
$feature->init();
class DBC_Default_Portfolio_Tab {
private $slug;
public function __construct($category_slug) {
$this->slug = $category_slug;
}
public function init() {
add_filter('et_pb_filterable_portfolio_shortcode_output', array($this, 'dbc_set_default_portfolio_tab'));
add_action('wp_head', array($this, 'dbc_default_portfolio_tab_css'));
}
function dbc_set_default_portfolio_tab($output) {
$output = str_replace(
'class="active" data-category-slug="all"',
'data-category-slug="all"',
$output
);
$output = str_replace(
'data-category-slug="'.esc_attr($this->slug).'"',
'data-category-slug="'.esc_attr($this->slug).'" class="active"',
$output
);
return $output;
}
function dbc_default_portfolio_tab_css() {
?>
<style>
.et_pb_portfolio_filter_all {
display: none !important;
}
.et_pb_portfolio_item:not(.project_category-<?php esc_html_e($this->slug); ?>) {
display: none;
}
</style>
<?php
}
}