简体   繁体   中英

How to create link to a data-filter element?

I have [this website][1] made in Wordpress.

It's there any way to link the blue icons to the data-filter of the portfolio? I want to sort the portfolio gallery via blue icons. My problem is that the wordpress theme is written in shortcode and it's really hard for me to understand and modify the code. I've tried to create a link like below and afterto put it in the pagebuilder in the sections of the icons, but it doesn't work or I'm doing something wrong.

<script>
    var filterFromQuerystring = getParameterByName('filter');
    $('a[data-filter=".' + filterFromQuerystring  + '"]').click();
</script>

 <p>[vc_row type="full_width_background" full_screen_row_position="middle" bg_color="#3a6ee8" scene_position="center" text_color="light" text_align="left" top_padding="8%" bottom_padding="3%" color_overlay="#3a6ee8" overlay_strength="0.3" enable_shape_divider="true" shape_divider_position="bottom" shape_type="curve"][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/1" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][vc_custom_heading text="Împreună am construit toate tipurile de clădiri" font_container="tag:h2|text_align:center" use_theme_fonts="yes"][vc_row_inner column_margin="default" text_align="left"][vc_column_inner column_padding="padding-4-percent" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/3" column_border_width="none" column_border_style="solid"][vc_custom_heading text="Proiectat" font_container="tag:h5|text_align:center|color:rgba(255%2C255%2C255%2C0.7)" use_theme_fonts="yes" css_animation="fadeIn"][milestone heading_inherit="h2" subject_padding="2%" color="Default" effect="count" milestone_alignment="default" number="3" subject="Milioane Metri Pătrați" number_font_size="92"][/vc_column_inner][vc_column_inner column_padding="padding-4-percent" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/3" column_border_width="none" column_border_style="solid"][vc_custom_heading text="Urbanizat" font_container="tag:h5|text_align:center|color:rgba(255%2C255%2C255%2C0.7)" use_theme_fonts="yes" css_animation="fadeIn"][milestone heading_inherit="h2" subject_padding="2%" color="Default" effect="count" milestone_alignment="default" number="16" subject="Mii Hectare" number_font_size="92"][/vc_column_inner][vc_column_inner column_padding="padding-4-percent" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/3" column_border_width="none" column_border_style="solid"][vc_custom_heading text="Construit" font_container="tag:h5|text_align:center|color:rgba(255%2C255%2C255%2C0.7)" use_theme_fonts="yes" css_animation="fadeIn"][milestone heading_inherit="h2" subject_padding="2%" color="Default" effect="count" milestone_alignment="default" number="37" number_font_size="92" subject="Proiecte"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row type="full_width_background" full_screen_row_position="middle" scene_position="center" text_color="dark" text_align="center" top_padding="3%" bottom_padding="7%" overlay_strength="0.3" shape_divider_position="bottom" shape_type="curve"][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/6" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][nectar_icon icon_family="iconsmind" icon_style="default" icon_color="Accent-Color" icon_padding="15px" icon_iconsmind="iconsmind-Keypad"][vc_column_text]</p> <p style="text-align: center;"><span style="color: #3a6ee8;">Rezidențial</span></p> <p>[/vc_column_text][/vc_column][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/6" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" delay="500"][nectar_icon icon_family="iconsmind" icon_style="default" icon_color="Accent-Color" icon_padding="20px" icon_iconsmind="iconsmind-Shop-2"][vc_column_text]</p> <p style="text-align: center;"><span style="color: #3a6ee8;">Comercial</span></p> <p>[/vc_column_text][/vc_column][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/6" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" delay="1000"][nectar_icon icon_family="iconsmind" icon_style="default" icon_color="Accent-Color" icon_padding="20px" icon_iconsmind="iconsmind-Hotel"][vc_column_text]</p> <p style="text-align: center;"><span style="color: #3a6ee8;">Birouri</span></p> <p>[/vc_column_text][/vc_column][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/6" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" delay="1500"][nectar_icon icon_family="iconsmind" icon_style="default" icon_color="Accent-Color" icon_padding="20px" icon_iconsmind="iconsmind-Factory"][vc_column_text]</p> <p style="text-align: center;"><span style="color: #3a6ee8;">Industrial</span></p> <p>[/vc_column_text][/vc_column][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/6" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" delay="2000"][nectar_icon icon_family="iconsmind" icon_style="default" icon_color="Accent-Color" icon_padding="20px" icon_iconsmind="iconsmind-Map"][vc_column_text]</p> <p style="text-align: center;"><span style="color: #3a6ee8;">Urbanistic</span></p> <p>[/vc_column_text][/vc_column][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/6" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" delay="2500"][nectar_icon icon_family="iconsmind" icon_style="default" icon_color="Accent-Color" icon_padding="20px" icon_iconsmind="iconsmind-Green-House"][vc_column_text]</p> <p style="text-align: center;"><span style="color: #3a6ee8;">Special</span></p> <p>[/vc_column_text][/vc_column][/vc_row][vc_row type="full_width_background" full_screen_row_position="middle" scene_position="top" layer_one_image="6038" layer_two_image="6034" text_color="dark" text_align="left" top_padding="1%" bottom_padding="1%" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="padding-3-percent" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="5/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][vc_column_text css=".vc_custom_1517436123174{margin-top: 50px !important;margin-bottom: 20px !important;}"]</p> <h5><span style="color: #999999;">Proiect no.1</span></h5> <h2>Coresi Shopping Resort</h2> <p>[/vc_column_text][nectar_icon_list animate="true" color="default" icon_size="small" icon_style="no-border"][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517435668816-0-5" tab_id="1517435668820-10" icon_iconsmind="iconsmind-Shop-2" header="Comercial"][/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517434471-1-58" tab_id="1517434692723-9" header="60 000 m2" icon_iconsmind="iconsmind-Background"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517435114965-0-4" tab_id="1517434692723-9" header="2015" icon_iconsmind="iconsmind-Key"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" title="List Item" id="1517434471-2-33" tab_id="1517434693099-10" icon_fontawesome="fa fa-briefcase" header="Immochan Imobiliare"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517435106511-0-9" tab_id="1517434692723-9" header="Strada Turnului, Brasov" icon_iconsmind="iconsmind-Map2"] [/nectar_icon_list_item][/nectar_icon_list][/vc_column][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="7/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" delay="100"][nectar_cascading_images image_1_url="6078" image_1_offset_x_sign="-" image_1_offset_x="15%" image_1_offset_y_sign="+" image_1_offset_y="25%" image_1_rotate_sign="+" image_1_rotate="none" image_1_animation="Grow In" image_1_box_shadow="x_large_depth" image_2_url="6070" image_2_offset_x_sign="+" image_2_offset_x="65%" image_2_offset_y_sign="+" image_2_offset_y="15%" image_2_rotate_sign="+" image_2_rotate="none" image_2_animation="Grow In" image_2_box_shadow="x_large_depth" image_3_url="6079" image_3_offset_x_sign="+" image_3_offset_x="35%" image_3_offset_y_sign="-" image_3_offset_y="50%" image_3_rotate_sign="+" image_3_rotate="none" image_3_animation="Grow In" image_3_box_shadow="x_large_depth" image_4_offset_x_sign="+" image_4_offset_x="0%" image_4_offset_y_sign="+" image_4_offset_y="0%" image_4_rotate_sign="+" image_4_rotate="none" image_4_animation="Fade In" image_4_box_shadow="none" border_radius="none" animation_timing="500"][/vc_column][/vc_row][vc_row type="in_container" full_screen_row_position="middle" scene_position="center" text_color="dark" text_align="left" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/1" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][divider line_type="Full Width Line" line_thickness="1" divider_color="default" animate="yes"][/vc_column][/vc_row][vc_row type="full_width_background" full_screen_row_position="middle" equal_height="yes" content_placement="middle" scene_position="top" layer_one_image="6038" layer_two_image="6034" text_color="dark" text_align="left" top_padding="1%" bottom_padding="1%" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="padding-3-percent" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="7/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][nectar_cascading_images image_1_url="6076" image_1_offset_x_sign="+" image_1_offset_x="0%" image_1_offset_y_sign="-" image_1_offset_y="55%" image_1_rotate_sign="+" image_1_rotate="none" image_1_animation="Grow In" image_1_box_shadow="none" image_2_url="6075" image_2_offset_x_sign="+" image_2_offset_x="50%" image_2_offset_y_sign="+" image_2_offset_y="35%" image_2_rotate_sign="+" image_2_rotate="none" image_2_animation="Grow In" image_2_box_shadow="none" image_3_url="6077" image_3_offset_x_sign="-" image_3_offset_x="35%" image_3_offset_y_sign="+" image_3_offset_y="30%" image_3_rotate_sign="+" image_3_rotate="none" image_3_animation="Grow In" image_3_box_shadow="x_large_depth" image_4_offset_x_sign="+" image_4_offset_x="0%" image_4_offset_y_sign="+" image_4_offset_y="0%" image_4_rotate_sign="+" image_4_rotate="none" image_4_animation="Fade In" image_4_box_shadow="none" border_radius="none"][/vc_column][vc_column column_padding="padding-6-percent" column_padding_position="left" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="5/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][vc_column_text css=".vc_custom_1517438369719{margin-top: 50px !important;margin-bottom: 20px !important;}"]</p> <h5><span style="color: #999999;">Proiect no.1</span></h5> <h2>Green Gate</h2> <p>[/vc_column_text][nectar_icon_list animate="true" color="default" icon_size="small" icon_style="no-border"][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517437108276-0-6" tab_id="1517435668820-10" icon_iconsmind="iconsmind-Hotel" header="Birouri"][/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517437108344-0-6" tab_id="1517434692723-9" header="49 000 m2" icon_iconsmind="iconsmind-Background"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517437108417-0-3" tab_id="1517434692723-9" header="2014" icon_iconsmind="iconsmind-Key"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" title="List Item" id="1517437108518-0-4" tab_id="1517434693099-10" icon_fontawesome="fa fa-briefcase" header="Green Gate Development"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517437108606-0-3" tab_id="1517434692723-9" header="Bulevardul Tudor Vladimirescu, Bucuresti" icon_iconsmind="iconsmind-Map2"] [/nectar_icon_list_item][/nectar_icon_list][/vc_column][/vc_row][vc_row type="in_container" full_screen_row_position="middle" scene_position="center" text_color="dark" text_align="left" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/1" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][divider line_type="Full Width Line" line_thickness="1" divider_color="default" animate="yes"][/vc_column][/vc_row][vc_row type="full_width_background" full_screen_row_position="middle" scene_position="top" layer_one_image="6038" layer_two_image="6034" text_color="dark" text_align="left" top_padding="1%" bottom_padding="1%" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="padding-3-percent" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="5/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][vc_column_text css=".vc_custom_1517441470308{margin-top: 50px !important;margin-bottom: 20px !important;}"]</p> <h5><span style="color: #999999;">Proiect no.3</span></h5> <h2>Complex Comercial Cora</h2> <p>[/vc_column_text][nectar_icon_list animate="true" color="default" icon_size="small" icon_style="no-border"][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517437108276-0-6" tab_id="1517435668820-10" icon_iconsmind="iconsmind-Shop-2" header="Comercial"][/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517437108344-0-6" tab_id="1517434692723-9" header="85 000 m2" icon_iconsmind="iconsmind-Background"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517437108417-0-3" tab_id="1517434692723-9" header="2013" icon_iconsmind="iconsmind-Key"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" title="List Item" id="1517437108518-0-4" tab_id="1517434693099-10" icon_fontawesome="fa fa-briefcase" header="Temestate"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517437108606-0-3" tab_id="1517434692723-9" header="Strada Cumpenei, Constanta" icon_iconsmind="iconsmind-Map2"] [/nectar_icon_list_item][/nectar_icon_list][/vc_column][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="7/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" delay="100"][nectar_cascading_images image_1_url="6081" image_1_offset_x_sign="+" image_1_offset_x="0%" image_1_offset_y_sign="-" image_1_offset_y="55%" image_1_rotate_sign="+" image_1_rotate="none" image_1_animation="Grow In" image_1_box_shadow="none" image_2_url="6082" image_2_offset_x_sign="+" image_2_offset_x="50%" image_2_offset_y_sign="+" image_2_offset_y="35%" image_2_rotate_sign="+" image_2_rotate="none" image_2_animation="Grow In" image_2_box_shadow="none" image_3_url="6080" image_3_offset_x_sign="-" image_3_offset_x="35%" image_3_offset_y_sign="+" image_3_offset_y="30%" image_3_rotate_sign="+" image_3_rotate="none" image_3_animation="Grow In" image_3_box_shadow="x_large_depth" image_4_offset_x_sign="+" image_4_offset_x="0%" image_4_offset_y_sign="+" image_4_offset_y="0%" image_4_rotate_sign="+" image_4_rotate="none" image_4_animation="Fade In" image_4_box_shadow="none" border_radius="none"][/vc_column][/vc_row][vc_row type="in_container" full_screen_row_position="middle" scene_position="center" text_color="dark" text_align="left" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/1" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][divider line_type="Full Width Line" line_thickness="1" divider_color="default" animate="yes"][/vc_column][/vc_row][vc_row type="full_width_background" full_screen_row_position="middle" equal_height="yes" content_placement="middle" scene_position="top" layer_one_image="6038" layer_two_image="6034" text_color="dark" text_align="left" top_padding="1%" bottom_padding="1%" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="padding-3-percent" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="7/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][nectar_cascading_images image_1_url="6086" image_1_offset_x_sign="+" image_1_offset_x="0%" image_1_offset_y_sign="-" image_1_offset_y="55%" image_1_rotate_sign="+" image_1_rotate="none" image_1_animation="Grow In" image_1_box_shadow="x_large_depth" image_2_url="6085" image_2_offset_x_sign="+" image_2_offset_x="50%" image_2_offset_y_sign="+" image_2_offset_y="45%" image_2_rotate_sign="+" image_2_rotate="none" image_2_animation="Grow In" image_2_box_shadow="x_large_depth" image_3_url="6084" image_3_offset_x_sign="-" image_3_offset_x="35%" image_3_offset_y_sign="+" image_3_offset_y="30%" image_3_rotate_sign="+" image_3_rotate="none" image_3_animation="Grow In" image_3_box_shadow="x_large_depth" image_4_offset_x_sign="+" image_4_offset_x="0%" image_4_offset_y_sign="+" image_4_offset_y="0%" image_4_rotate_sign="+" image_4_rotate="none" image_4_animation="Fade In" image_4_box_shadow="none" border_radius="none"][/vc_column][vc_column column_padding="padding-6-percent" column_padding_position="left" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="5/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][vc_column_text css=".vc_custom_1517444760169{margin-top: 50px !important;margin-bottom: 20px !important;}"]</p> <h5><span style="color: #999999;">Proiect no.4</span></h5> <h2>Auchan Ghencea</h2> <p>[/vc_column_text][nectar_icon_list animate="true" color="default" icon_size="small" icon_style="no-border"][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517435668816-0-5" tab_id="1517435668820-10" icon_iconsmind="iconsmind-Shop-2" header="Comercial"][/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517434471-1-58" tab_id="1517434692723-9" header="42 000 m2" icon_iconsmind="iconsmind-Background"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517435114965-0-4" tab_id="1517434692723-9" header="2015" icon_iconsmind="iconsmind-Key"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" title="List Item" id="1517434471-2-33" tab_id="1517434693099-10" icon_fontawesome="fa fa-briefcase" header="Auchan Romania"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517435106511-0-9" tab_id="1517434692723-9" header="Bulevardul 1 Mai, Bucuresti" icon_iconsmind="iconsmind-Map2"] [/nectar_icon_list_item][/nectar_icon_list][/vc_column][/vc_row][vc_row type="in_container" full_screen_row_position="middle" scene_position="center" text_color="dark" text_align="left" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/1" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][divider line_type="Full Width Line" line_thickness="1" divider_color="default" animate="yes"][/vc_column][/vc_row][vc_row type="full_width_background" full_screen_row_position="middle" scene_position="top" layer_one_image="6038" layer_two_image="6034" text_color="dark" text_align="left" top_padding="1%" bottom_padding="1%" disable_element="yes" overlay_strength="0.3" shape_divider_position="bottom" shape_type=""][vc_column column_padding="padding-3-percent" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="5/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][vc_column_text css=".vc_custom_1517444765956{margin-top: 50px !important;margin-bottom: 20px !important;}"]</p> <h5><span style="color: #999999;">Proiect no.5</span></h5> <h2>PUZ Sector 6</h2> <p>[/vc_column_text][nectar_icon_list animate="true" color="default" icon_size="small" icon_style="no-border"][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517435668816-0-5" tab_id="1517435668820-10" icon_iconsmind="iconsmind-Map" header="Urbanistic"][/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517434471-1-58" tab_id="1517434692723-9" header="38 km2" icon_iconsmind="iconsmind-Background"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" icon_family="iconsmind" title="List Item" id="1517435114965-0-4" tab_id="1517434692723-9" header="2016" icon_iconsmind="iconsmind-Key"] [/nectar_icon_list_item][nectar_icon_list_item icon_type="icon" title="List Item" id="1517434471-2-33" tab_id="1517434693099-10" icon_fontawesome="fa fa-briefcase" header="Primaria Sectorului 6"] [/nectar_icon_list_item][/nectar_icon_list][/vc_column][vc_column enable_animation="true" animation="grow-in" centered_text="true" column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="7/12" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" delay="100"][nectar_cascading_images image_1_url="6090" image_1_offset_x_sign="+" image_1_offset_x="0%" image_1_offset_y_sign="-" image_1_offset_y="55%" image_1_rotate_sign="+" image_1_rotate="none" image_1_animation="Grow In" image_1_box_shadow="x_large_depth" image_2_url="6091" image_2_offset_x_sign="+" image_2_offset_x="50%" image_2_offset_y_sign="+" image_2_offset_y="35%" image_2_rotate_sign="+" image_2_rotate="none" image_2_animation="Grow In" image_2_box_shadow="x_large_depth" image_3_url="6089" image_3_offset_x_sign="-" image_3_offset_x="35%" image_3_offset_y_sign="+" image_3_offset_y="30%" image_3_rotate_sign="+" image_3_rotate="none" image_3_animation="Grow In" image_3_box_shadow="x_large_depth" image_4_offset_x_sign="+" image_4_offset_x="0%" image_4_offset_y_sign="+" image_4_offset_y="0%" image_4_rotate_sign="+" image_4_rotate="none" image_4_animation="Fade In" image_4_box_shadow="none" border_radius="none"][/vc_column][/vc_row][vc_row type="in_container" full_screen_row_position="middle" scene_position="center" text_color="dark" text_align="left" overlay_strength="0.3" shape_divider_position="bottom"][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/1" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][vc_custom_heading text="Arhitectura este muzica împietrită" font_container="tag:h1|text_align:center" use_theme_fonts="yes"][/vc_column][/vc_row][vc_row type="in_container" full_screen_row_position="middle" scene_position="center" text_color="dark" text_align="left" overlay_strength="0.3" shape_divider_position="bottom"][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="none" column_border_radius="none" width="1/1" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][vc_raw_js]PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPiBhbGVydCgiRW50ZXIgeW91ciBqcyBoZXJlISIgKTsgPC9zY3JpcHQ+[/vc_raw_js][/vc_column][/vc_row]</p>

you will have to change the html a little bit. it's possible without changing the html but it will be messy.

first for each icon go to the div with class vc_column-inner (it will be wrapping the icon) then replace the class with vc_column-inner filtername then add an attribute containing the corresponding filter (exemple: for the "Birouri" icon search for div with the class vc_column-inner replace the class with vc_column-inner filtername then add data-filtername="birouri" , do the same for the other icon)

lastly add this javascript

<script>
    $('.filtername').on('click', function(){
       if($('a[data-filter=".' + $(this).data('filtername')  + '"]').length){
          $('a[data-filter=".' + $(this).data('filtername')  + '"]').click();
       }
    })
</script>

Without changing the html the ugly way

<script>
    var nectar_icon = document.getElementsByClassName('nectar_icon');
    var a = document.getElementsByClassName('container')[5].getElementsByTagName('a');
    nectar_icon[0].addEventListener('click', function(){
       a[3].click();
    });
    nectar_icon[1].addEventListener('click', function(){
       a[2].click();
    });
    nectar_icon[2].addEventListener('click', function(){
       a[1].click();
    });
    nectar_icon[4].addEventListener('click', function(){
       a[5].click();
    });
    nectar_icon[5].addEventListener('click', function(){
       a[4].click();
    });
</script>

If I catch what you want correctly, You can do with this:

$('i.iconsmind-Keypad').click(function(){
$('.js-filter [data-filter=".rezidential"]').trigger('click');
});

Every icon have an "icon class" associated that you can use for focus the jquery. Maybe even more "up" in the html code, in the previous div for example, for have a bigger place to click but With this you simulate a click in the original link of the portfolio and achieve what you want.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM