ako ima neka dobra duša koja bih mi mogla pomoći oko js skripte riječ je o idućem :
php file :
Citiraj:
<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:
Citiraj:
//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 :
Citiraj:
.map1 {
display:none;
}
.map2 {
display:none;
}
.map2prikaz {
display:block;
}
.map1prikaz {
display:block;
}
|
js
Citiraj:
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);
}
});
});
|