[0siris]

ako ima neka dobra duša koja bih mi mogla pomoći oko js skripte riječ je o idućem :

php file :

<div class="map-switcher">
<button id="map1" type="button" name="button">MAP1</button>
<button id="map2" type="button" name="button">MAP2</button>
</div>

<div class="map1">
<img id="map1img" src="<?php echo wp_get_attachment_image_src( 900, 'full' )[0]; ?>" data-zoom-image="<?php echo wp_get_attachment_image_src( 899, 'full' )[0]; ?>"/>
</div>

<div class="map2">
<img id="map2img" src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160225.jpg" data-zoom-image="<?php echo wp_get_attachment_image_src( 899, 'full' )[0]; ?>"/>
</div>

dakle imam 2 buttona sa 2 id, map1 i map 2 te 2 imagea sa id map1img i map2img

sass file:

//MAP SWITCHER

.map-switcher {
padding-bottom: $trim;
button {
display:inline;
width: 50%;
float: left;
background-color: white;
box-shadow: none;
border:1px solid black;
&:hover {
background-color: $blue;
}
}
}


.map2 {
display:none;
}

.map2prikaz {
display:block;
}

e sada bih volio napisati JS kod koji radi iduće :

pri kliku na map1 button prikazuje se mapa1 a druga mapa ima display:none.
pri kliku na map2 button prikazuje se mapa2 a mapa1 dobija display none:

nebih radio preko toggle moda....
koliko znam sass i ostalo toliko neznam js pa ako ima neka dobra duša da mi barem polovično pomogne oko ovog js koda bio bih mu i više nego zahvalan i doista hvala puno!




EDIT:

problem riješen naravno kada postam -_- ali neka ostane možda nekome dobro dođe :

dodane ove klase u sass :

.map1 {
display:none;
}

.map2 {
display:none;
}

.map2prikaz {
display:block;
}


.map1prikaz {
display:block;
}

js

jQuery(function() {

jQuery('#map1img, #map2img').elevateZoom({
zoomType: "inner",
easing: true,
responsive: true
});
jQuery('#map2').on('click', function(){
jQuery('.map2').addClass('map2prikaz');
jQuery('.map1').removeClass('map1prikaz');
});

jQuery('#map1').on('click', function(){
jQuery('.map1').addClass('map1prikaz');
jQuery('.map2').removeClass('map2prikaz');
});

var target = jQuery('.zoomContainer')[0]; // Get DOM element from jQuery collection
jQuery('#offcanvas__trigger').click(function () {
if (screenfull.enabled) {
screenfull.request(target);
}
});

});