hi i am using slick slider and when i click "tm-prodetails-thumbs" navigation it changes but what i want to do is "tm-prodetails-thumbs a href". When changed, write a href attr values "productDetailsZoom".
"tm-prodetails-image" instead of click
When there is a change, let the values change.
I'm a little new to Jquery so I hope I don't get a minus from you.
<div class="col-lg-6 col-md-6 col-12">
<!-- Product Details Images -->
<div class="tm-prodetails-images">
<div class="tm-prodetails-largeimage">
<img src="images/prdoduct-details-image-1.jpg"
data-zoom-image="images/prdoduct-details-image-1.jpg"
alt="product image">
</div>
<button type="button" class="slick-prev"></button>
<div id="image-gallery" class="tm-prodetails-thumbs">
<a href="#"
data-image="images/prdoduct-details-image-1.jpg"
data-zoom-image="images/prdoduct-details-image-1.jpg">
<img src="images/prdoduct-details-image-1.jpg" alt="">
</a>
<a href="#"
data-image="images/prdoduct-details-image-2.jpg"
data-zoom-image="images/prdoduct-details-image-2.jpg">
<img src="images/prdoduct-details-image-2.jpg" alt="">
</a>
<a href="#"
data-image="images/prdoduct-details-image-3.jpg"
data-zoom-image="images/prdoduct-details-image-3.jpg">
<img src="images/prdoduct-details-image-3.jpg" alt="">
</a>
<a href="#"
data-image="images/prdoduct-details-image-4.jpg"
data-zoom-image="images/prdoduct-details-image-4.jpg">
<img src="images/prdoduct-details-image-4.jpg" alt="">
</a>
<a href="#"
data-image="images/prdoduct-details-image-5.jpg"
data-zoom-image="images/prdoduct-details-image-5.jpg">
<img src="images/prdoduct-details-image-5.jpg" alt="">
</a>
<a href="#"
data-image="images/prdoduct-details-image-6.jpg"
data-zoom-image="images/prdoduct-details-image-6.jpg">
<img src="images/prdoduct-details-image-6.jpg" alt="">
</a>
</div>
<button type="button" class="slick-next"></button>
</div>
</div>
(function ($) {
'use strict';
var blogs = {
/* Product Details Zoom */
productDetailsZoom: function () {
$('.tm-prodetails-largeimage img').elevateZoom({
gallery: 'image-gallery',
// galleryActiveClass: 'active',
zoomWindowWidth: 300,
zoomWindowHeight: 100,
scrollZoom: false,
zoomType: 'inner',
cursor: 'crosshair'
});
},
/* Product Details Zoom Image Change */
productDetailsImageZoomChange: function () {
$('.tm-prodetails-thumbs').find('a').on('click', function (e) {
e.preventDefault();
var largeImage = $(this).data('zoom-image');
$('.tm-prodetails-largeimage').find('img').attr('data-zoom-image', largeImage);
$('.tm-prodetails-zoomimage').attr('href', largeImage);
});
},
/* Initializer */
init: function () {
blogs.productDetailsZoom();
blogs.productDetailsImageZoomChange();
}
};
blogs.init();
$('#image-gallery').slick({
slidesToShow: 3,
slidesToScroll: 1,
prevArrow: $('.slick-prev'),
nextArrow: $('.slick-next'),
> Blockquote
autoplay: true,
autoplaySpeed: 2000,
centerMode: true,
focusOnSelect: true
});
})(jQuery);
Related
#6 image carousel not working while adding While adding images in between the the carousel stops working. #
<div id="display-panel">
<img src="images/left.jpg" class="prev" alt="">
<div class="display-panel-inner">
<img src="images/book1.jpg" alt="" class="active">
<img src="images/book2.jpg" alt="">
<img src="images/book3.jpg" alt="">
<img src="images/book5.jpg" alt="">
<img src="images/book6.jpg" alt="">
<img src="images/book7.jpg" alt="">
</div>
<img src="images/right.jpg" class="next" alt="">
</div>
#jquery for the above code is not working for the tag i did some changes as well they are also not working #
$(document).ready(() => {
$('.next').on('click', () => {
var isImg = $('.abc');
var a = isImg.next('');
console.log(a);
var currentImg = $('.active');
var nextImg = currentImg.next('.active');
console.log(nextImg);
if (nextImg.length) {
currentImg.removeClass('active').css('z-index', 10);
nextImg.addClass('active').css('z-index', 10);
}
});
$(document).ready(() => {
$('.prev').on('click', () => {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active').css('z-index', 10);
prevImg.addClass('active').css('z-index', 10);
}
});
});
});
In my navbar I have two logos and a hamburger icon (for displaying the menu). When the user scrolls down, the navbar should change the background color, logos and hamburger should change color (from white to dark). I have managed to achieve that. But when you open and then close the menu after it has been scrolled, the hamburger icon disappears. I have tried many things (including adding classes to the hamburger button on scroll), but nothing worked. I have no idea, how to target "closing" button when the navbar is in scrolled state, so the "dark" version of hamburger button shows up.
$(function(){
function e(){$(window).scrollTop()>0?(
$("nav.nav").addClass("scrolled"),
$(".content-nav").fadeIn(200)):(
$("nav.nav").removeClass("scrolled"),
$(".content-nav").fadeOut(200))
};
});
$(document).ready(function() {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle( "slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle( "slow", function() {
$(".cross").hide();
$(".hamburger-white").show();
});
});
$( ".menu li" ).click(function() {
$( ".menu" ).toggle();
$(".cross").hide();
$(".hamburger").show();
});
});
.landing-page-nav-container {
background-color: #29428A;
}
.scrolled .landing-page-nav-container {
background-color: #FFFFFF;
}
.logo-dark, .hamburger-dark {
display: none;
}
.scrolled .logo-dark, .scrolled .hamburger-dark {
display: initial;
}
.scrolled .logo-white, .scrolled .hamburger-white {
display: none;
}
<nav class="nav navbar-fixed-top collapsed">
<div class="landing-page-nav-container">
<a href="<?php the_field('link_logo')?>">
<img class="img-responsive img-nav img-logo-centrum logo-white" src="https://placekitten.com/50/50">
<img class="img-responsive img-nav img-logo-centrum logo-dark" src="https://placekitten.com/49/50">
</a>
<img class="img-responsive img-nav img-logo-forum logo-white" src="https://placekitten.com/49/49">
<img class="img-responsive img-nav img-logo-forum logo-dark" src="https://placekitten.com/50/49">
<button class="hamburger hamburger-white">
<img class="img-responsive img-nav hamburger-icon" src="https://via.placeholder.com/50x50/000000/FFFFFF">
</button>
<button class="hamburger hamburger-dark">
<img class="img-responsive img-nav hamburger-icon" src="https://via.placeholder.com/50x50">
</button>
<button class="cross" style="display: none">
<img class="img-responsive img-nav hamburger-icon cross-icon" src="https://via.placeholder.com/50x50?text=cross">
</button>
<div class="menu" style="display: none">
<ul>
<li><?php the_field('about_napis')?></li>
<li><?php the_field('program_napis')?></li>
<li><?php the_field('registration_napis')?></li>
<li><?php the_field('report_napis')?></li>
<li><?php the_field('lttalks_napis')?></li>
<li><?php the_field('events_napis')?></li>
</ul>
</div>
</div>
</nav>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
The problem was in applying .show() on .hamburger, after clicking on .cross (which was messing in corect executing CSS).
Working jQuery code:
$(function(){
function e(){$(window).scrollTop()>0?(
$("nav.nav").addClass("scrolled"),
$(".content-nav").fadeIn(200)):(
$("nav.nav").removeClass("scrolled"),
$(".content-nav").fadeOut(200))
};
});
$(document).ready(function() {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle( "slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle( "slow", function() {
$(".cross").hide();
$(".hamburger-dark").removeAttr("style");
$(".hamburger-white").removeAttr("style");
});
});
$( ".menu li" ).click(function() {
$( ".menu" ).toggle();
$(".cross").hide();
$(".hamburger-dark").removeAttr("style");
$(".hamburger-white").removeAttr("style");
});
});
I am trying to "implement" slick-slider in React like this:
I am building a site through Gatsby, don't know if that is important information, but will include it just in case.
But when I develop a site through Gatsby this is the type of behavior I get:
Take a careful look at how different selected slide doesn't always move in correct margin. It is always different/moves more and more to the right.
This is part of my code with Slick Slider settings:
const IndexPage = () => {
const settings =
{
className: "center",
centerPadding: "60px",
infinite: true,
centerMode: true,
slidesToShow: 1,
dots: true,
arrows: true,
swipe: true,
swipeToSlide: true,
variableWidth: true,
responsive: [
{
breakpoint: 850,
settings:
{
centerMode: false,
},
},],
};
return (
<Page>...
And this is the part where I try to render the slider:
<div className="activities">
<div className="z">
<div className="activities-container">
<h1 className="title title-light no-margin">
...
</h1>
<p className="container-fluid block1-paragraph activities-paragraph">
...
</p>
</div>
<div>
<Slider {...settings}>
<div>
<img className="slide-img" src={jedan} alt="" />
</div>
<div>
<img className="slide-img" src={dva} alt="" />
</div>
<div>
<img className="slide-img" src={tri} alt="" />
</div>
<div>
<img className="slide-img" src={cetiri} alt="" />
</div>
<div>
<img className="slide-img" src={pet} alt="" />
</div>
<div>
<img className="slide-img" src={sest} alt="" />
</div>
<div>
<img className="slide-img" src={sedam} alt="" />
</div>
<div>
<img className="slide-img" src={osam} alt="" />
</div>
<div>
<img className="slide-img" src={devet} alt="" />
</div>
<div>
<img className="slide-img" src={deset} alt="" />
</div>
</Slider>
</div>
</div>
</div>
I left all of the divs the slider is just in case the problem isn't the slider itself.
What is the cause of this issue? Any help is appreciated!!!
I have an array of objects, where I have the url of the image. I need to display these images in carousel:
<div class="item active">
<div class="row cst-carouselImg">
<div class="col-sm-3 col-xs-6" ng-repeat="image in pack.hotels.current.hotelImages | limitTo:'4'">
<a href="#"><img
ng-src="<?php
echo 'http://photos.hotelbeds.com/giata/';
?>{{image.path}}"
alt="Image" class="img-responsive"></a>
</div>
</div>
</div>
At this point I have only the first 4 pictures from the array. Next I display the next 4 images from the array:
<div class="item">
<div class="row cst-carouselImg">
<div class="col-sm-3 col-xs-6" ng-repeat="image in pack.hotels.current.hotelImages" ng-if="$index > 3 && $index <8">
<a href="#"><img
ng-src="<?php echo
'http://photos.hotelbeds.com/giata/';
?>{{image.path}}"
alt="Image" class="img-responsive"></a>
</div>
</div>
</div>
How can I display all the images using ng-repeat instead of manually adding <div class="item"> and setting manually $index?
Here i take some sample array you can modify it accordingly
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.hotelImages=[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7}];
$scope.loopCount=Math.ceil($scope.hotelImages.length/4);
$scope.getNumber = function(num) {
var arr=[];
for(i=0;i<num;i++){
arr.push(i);
}
return arr;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="item" ng-repeat="i in getNumber(loopCount) track by $index">
Carousel :-{{i}}
<div class="row cst-carouselImg">
<div class="col-sm-3 col-xs-6" ng-repeat="image in hotelImages" ng-if="$index >=(i*4) && $index <(i*4)+4" >
image:- {{image.id}}
</div>
</div>
</div>
</div>
If I understood you correctly you are aiming at having a nested ng-repeat, one for the items and one for the images. Let me know if I misunderstood you or you need some clarifications. Please see this snippet below:
var app = angular.module("app", []);
app.controller('exampleCtrl', function($scope){
$scope.hotels= [
[
{
path: "hotel1 path1",
otherprop: true
},
{
path: "hotel1 path2",
otherprop: false
},
{
path: "hotel1 path3",
otherprop: true
}
],
[
{
path: "hotel2 path1",
otherprop: true
},
{
path: "hotel2 path2",
otherprop: true
}
],
[
{
path: "hotel3 path1",
otherprop: false
},
{
path: "hotel3 path2",
otherprop: false
},
{
path: "hotel3 path3",
otherprop: false
},
{
path: "hotel3 path4",
otherprop: true
}
]
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="exampleCtrl">
<div class="item" ng-repeat="hotel in hotels">
<p>This is Hotel #{{$index+1}}</p>
<div class="row cst-carouselImg">
<div class="col-sm-3 col-xs-6" ng-repeat="image in hotel">
<a href="#">
<img ng-src="{{image.path}}" class="img-responsive" alt="(this is alt text)"/>
Image {{$index+1}}'s path: {{image.path}}
</a>
</div>
</div>
</div>
</div>
</div>
I have a div that show something, I want to make that div can reload after I push a button, I make a function like this in my controller :
$scope.getdis = function () {
document.getElementById('map').contentWindow.location.reload();
};
this is my full controller :
app.controller('discoverCtrl', function($scope, $timeout, $http, $location, $ionicPopup) {
google.maps.event.addDomListener(window, 'load', function() {
$scope.initialise = function() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
center: myLatlng,
zoom: 13,
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
clickable: true
});
var dparkings;
dparkings = '{"dparking": {"cabang":[{"id":"1","place":"Aaaa", "type":"R", "x":"-6.2245609", "y":"106.8290384"},{"id":"2", "place":"Bbbb", "type":"P", "x":"-6.2272616", "y":"106.8241209 " }, {"id":"3", "place":"Cccc", "type":"P", "x":"-6.2239737", "y":"106.8248723"}, {"id":"4", "place":"Dddd", "type":"P", "x":"-6.2239737", "y":"106.829"}]}}';
var msg = JSON.parse(dparkings);
var gambar;
for(i=0;i<msg.dparking.cabang.length;i++){
if (msg.dparking.cabang[i].type=='P') {
gambar = 'img/parking_on_small.png';
}
else if (msg.dparking.cabang[i].type=='R') {
gambar = 'img/reserved_on_small.png';
}
var point = new google.maps.LatLng(parseFloat(msg.dparking.cabang[i].x),parseFloat(msg.dparking.cabang[i].y));
tanda = new google.maps.Marker({
position: point,
map: map,
icon: gambar,
clickable: true,
title: msg.dparking.cabang[i].place
});
}
});
$scope.map = map;
};
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
});
//document.getElementById('map').contentWindow.location.reload();
$scope.showmenu = function () {
document.getElementById("leftpanels3").style.display = "block";
$timeout(function(){
document.getElementById("leftpanels3").style.display = "none";
}, 3000);
};
$scope.closemenu = function () {
document.getElementById("leftpanel3").style.display = "none";
};
//relogin($http, $location, '');
$scope.rs_page = function () {
displaylastreservation($http, $location, $ionicPopup);
};
$scope.godt = function () {
$location.path('/reservation_place');
};
/*$scope.geourls = geourl;
document.getElementById('ifr1').contentWindow.location.reload();
$scope.getpark = function () {
geourl = '#/geoloc_p';
$scope.geourls = geourl;
document.getElementById('ifr1').contentWindow.location.reload();
};
$scope.getres = function () {
geourl = '#/geoloc_r';
$scope.geourls = geourl;
document.getElementById('ifr1').contentWindow.location.reload();
};*/
$scope.getdis = function () {
geourl = '#/geoloc1';
//$scope.geourls = geourl;
document.getElementById('map').contentWindow.location.reload();
};
});
this is my html :
<div data-role="page" class="ui-mobile-viewport ui-overlay-a jqm-demos ui-page ui-page-theme-a ui-page-active fonthel" data-quicklinks="true" tabindex="0" style="min-height: 598px; width:100%;" ng-controller="discoverCtrl">
<div data-role="header" class="col-header ui-header ui-bar-inherit" role="banner">
<button class="btmenu" ng-click="showmenu()">
<img src="img/hamburger-menu.png">
</button>
<h3 class="col-header-title ui-title" role="heading" aria-level="1" >Discover
<table class="pull-right"><tbody><tr>
<td width="40" align="center"><img src="img/icon-coupon.png" height="24px" ></td>
<td width="40" align="center"><a class="ui-link" ng-click="rs_page()"><img src="img/icon-barcode.png" height="24px" ></a></td>
</tr></tbody></table>
</h3>
</div><!-- /header -->
<div class="dashboard-search clearfix">
<div class="pull-right">
<a class="ui-link" ng-click="getpark()"><img src="img/parking_on.png" class="icon30 vmargin5"></a>
<a class="ui-link" ng-click="getres()"><img src="img/reserved_on.png" class="icon30 vmargin5"></a>
</div>
<div class="input-group" style="width:65%">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" class="form-control" placeholder="Current location"></div>
<span class="input-group-btn">
<a class="btn btn-white ui-link" ><img src="img/icon-search-map.png" class="icon20"></a>
</span>
</div><!-- /input-group -->
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth" style="width: 100%; height: 500px; position: absolute;">
<!--<div id='mapdiv' style="height:380px; width:100%"></div> -->
<div id="map" data-tap-disabled="true" style="width: 100%; height: 500px; position: absolute;"></div>
</div><!-- /content -->
<!----------------------
|| FOOTER
------------------------>
<div class="footer clearfix" style="color:#fff">
<ul class="list-btn-discover clearfix">
<li><a class="active ui-link" ng-click="getdis()">Map View</a></li>
<li>List View</li>
</ul>
</div><!-- /footer -->
</div><!-- /page -->
<!----------------------
|| LEFT Panel
------------------------>
<div data-role="panel" name ="leftpanels3" id="leftpanels3" data-position="left" data-display="overlay" data-theme="a" style="text-shadow:0 0 0; padding:0;" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-a ui-panel-animate ui-panel-closed paneloverlay" >
<div class="ui-panel-inner"><ul class="menu-icon">
<li>
<a href="#/discover">
<img src="img/icon-discover.png" class="img-responsive">
<div class="title">Discover</div>
</a>
</li>
<li>
<a >
<img src="img/icon-history.png" class="img-responsive">
<div class="title">History</div>
</a>
</li>
<li>
<a>
<img src="img/icon-where_my_car.png" class="img-responsive">
<div class="title">Mark my car</div>
</a>
</li>
<li>
<a>
<img src="img/icon-promotion.png" class="img-responsive">
<div class="title">Promotions</div>
</a>
</li>
<li>
<a href="#/setting">
<img src="img/icon-setting.png" class="img-responsive">
<div class="title">Setting</div>
</a>
</li>
</ul></div>
</div>
<!-- /leftpanel3 -->
When I try to run it, this error show :
Cannot read property 'location' of undefined
Yet when I used that code to reload iframe, it work, anybody can help ?