I have developed a bootstrap carousel with a elevateZoom lens inside it. The issue is that when the mouse leaves the image, the lens does not disappear until the mouse leaves the lens too. In the example shown in official elevateZoom web this does not happen(the lens disappear as soon as the mouse leaves the image).
Here is my code:
<div id="planos" class="carousel slide" style="border-top:1px solid #FCF3E8; top:-1px" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" ng-app="planos-module" ng-controller="planos-controller">
<div ng-repeat="i in getNumber(number) track by $index" class="item" id="plano{{$index+1}}">
<img ng-src="img/planos/{{$index+1}}.jpg" alt="Plano {{$index+1}}" data-zoom-image="img/planos/{{$index+1}}.jpg" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control carousel-control-2" href="#planos" role="button" data-slide="prev">
<span class="fa fa-angle-left fa-3x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control carousel-control-2" href="#planos" role="button" data-slide="next">
<span class="fa fa-angle-right fa-3x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
And the relevant javascript:
$(document).ready(function(){
//some code
$('#plano1').addClass('active');
$('#planos .item img').each(function(){
$(this).elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 350
});
});
//some more code
});
What am I doing wrong?
Thank you very much
EDIT: Here is the JSFiddle. I wasn't able to replicate it exactly as my web, but the same issue is going on. Also, I couldn't import the elevateZoom js file, so I just copy-pasted its content in the js fiddle (if you scroll down in the JS section you can see my code)
EDIT2: SOLVED! The answer is below.
Solved!
Here is the answer, in case anyone else experiences the same issue.
I just had to add containLensZoom: true option to my elevateZoom initialization.
$(document).ready(function(){
//some code
$('#plano1').addClass('active');
$('#planos .item img').each(function(){
$(this).elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 350,
containLensZoom : true
});
});
//some more code
});
Related
I am trying to design a dynamic carousel that has multiple cards/images in one row. I have first tried achieving multiple cards in one row but next and previous buttons weren't working, so I searched online and found a solution for that now next and previous buttons are working fine, but I can see only one image in each slide. Below is my code,
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item" *ngFor="let data of dummyData;let i = index"
[ngClass]="{'active' : i == 0}">
<div class="row">
<div class="col">
<div class="main-card">
<span class="mt-4">
{{data.class}} <br>
{{data.when}}
</span>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
One card in each row
This is what I want to design
required design
Can anyone tell me where I am going wrong. Any help is much appreciated.
Thank you!!
I was able to achieve this by creating nested array.
Get data from server
check screen size to decide how many images to show on carousel
send data and number of images in array to chunk method
Apply apply for loop in html
HTML
<div class="carousel-item row w-100 mx-3 text-center {{ i == 0 ? 'active' : '' }} m-t-0" style="margin-right: 70px;" *ngFor='let fav of userFavourite; let i = index' >
<div class=" d-flex justify-content-around w-100" >
<div class="mainSlide " style="align-content: center;" *ngFor="let x of fav;" >
///Enter each image from loop..etc
</div>
</div>
</div>
TypeScript/Component.ts
//get the image/data from server
getUserFavourite() {
this._productService.getUserFavourite(this.loggedInUsername).subscribe(
(res) => {
if( this.scrWidth>1300){
this.favCount=4;
} else if(this.scrWidth<1300 && this.scrWidth>1025){
this.favCount='3';
} else if(this.scrWidth<1025 ){
this.favCount='2';
}
else if(this.scrWidth<600 ){
this.favCount='1';
}
this.userFavourite = this.chunks(res,this.favCount);
console.log(this.userFavourite);
},
(err) => {
this.error = err;
}
);
}
/**************************************************************** */
//gets the size of window screen to adjust number of images in an array to fit carousel
#HostListener('window:resize', ['$event'])
getScreenSize(event?) {
this.scrHeight = window.innerHeight;
this.scrWidth = window.innerWidth;
console.log(this.scrHeight, this.scrWidth);
}
/******************************************************************** */
//adds images from server to array
chunks(array, size) {
let results = [];
results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
}
I've used the following code to init the bootstrap popover.
Markup
<a class="help_popup" rel="popover" data-popover-content="#apiSearchTips" data-placement="bottom">
<span class="icon fw-stack fw-lg add-margin-left-1x" stylZ="font-size:10px">
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-question fw-stack-1x fw-inverse"></i>
</span>
</a>
<div id="apiSearchTips" class="hide help-popover-content" >
//Popover content
</div>
Code
$('a[rel="popover"]').popover({
container: 'body',
html: true,
trigger:'click',
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
This does not work unless I change the selector attribute to a different one rather than rel="popover". For an example say I change it to data-trigger="popover" and it works. Why does this happen?
My project is a AngularJs, I have a gallery photo, when I click on an image, I have a modal contains all images.
But my problem is: how to detect the index of an image from photo gallery to display the image at the beginning clicker on a modal?
My code:
<div class="item_scroll_dek jq-item-sz" ng-repeat="im in sizeImage" ng-class="{active : $last}"
ng-style="{'background': 'url('+im.image+') no-repeat center transparent', 'background-size': ''+im.x+' '+im.y+''}"
ng-click="openGallery(userprofile.profile.images)">
</div>
<script type="text/ng-template" id="popupTmplGallery.html">
<div class="modal-body">
<div id="Carousel" class="carousel slide" ng-show="isBusiness" >
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="$index" ng-repeat="im in userprofile.profile.images track by $index" ng-class="{active : $first}"></li>
</ol>
<div class="carousel-inner carousel-inner-css">
<div class="item" ng-repeat="im in galeryProfilBusiness track by $index" ng-class="{active : $first}">
<img style="width: 100%;" ng-src="{{getImages(im)}}" class="img-responsive">
</div>
</div>
<a class="left carousel-control carousel-control-left" href="#Carousel" ng-non-bindable data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control carousel-control-right" href="#Carousel" ng-non-bindable data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
$scope.openGallery = function (images) {
var modalInstance = $modal.open({
templateUrl: 'popupTmplGallery.html',
controller: 'ModaleCtrl',
scope: $scope ,
resolve: {
items: function ()
{
return images;
}
}
});
modalInstance.result.then(function (test)
{
console.log(test);
},
function ()
{
console.log('testing');
});
};
Please help me
Maybe you can use track by $index on your ng-repeat. Then you can pass the index as a parameter on your ng-click.
<div class="item_scroll_dek jq-item-sz" ng-repeat="im in sizeImage track by $index" ng-class="{active : $last}"
ng-style="{'background': 'url('+im.image+') no-repeat center transparent', 'background-size': ''+im.x+' '+im.y+''}"
ng-click="openGallery($index)">
or you can pass the entire image object like this:
<div class="item_scroll_dek jq-item-sz" ng-repeat="im in sizeImage track by $index" ng-class="{active : $last}"
ng-style="{'background': 'url('+im.image+') no-repeat center transparent', 'background-size': ''+im.x+' '+im.y+''}"
ng-click="openGallery(im)">
In your code behind, you can find the index with underscore.js.
$scope.openGallery = function(image){
var index = _.indexOf(sizeImage, im);
}
I want to override the bx slider prev, next with glyphicons chevron left and right. How can I get on that one?
Here is Code :
<div class="bx-controls-direction">
<a class="bx-prev" href="">Prev</a>
<a class="bx-next" href="">Next</a></div>
How can I replace the prev and next with the below span code in bx slider?
<span class="glyphicon glyphicon-chevron-left orange"></span>
<span class="glyphicon glyphicon-chevron-Right orange"></span>
bxSlider provides a nextText and prevText option to change the text of the controls. https://github.com/stevenwanderski/bxslider-4#user-content-controls
It should be possible to write your icon html direct into the option as the string will be directly added on slider creation:
https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js#L665
$(document).ready(function(){
$('.bxslider').bxSlider({
prevText: '<span class="glyphicon glyphicon-chevron-left orange"></span>',
nextText: '<span class="glyphicon glyphicon-chevron-right orange"></span>'
});
});
hope that helps!
I got my first star-rating up and running, however, I am missing a single-part.
My HTML looks like this:
<div class="rating">
<a class="star-link" href="/vote?hack=3&rating=1">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="1" id="3-star-1"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=2">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="2" id="3-star-2"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=3">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="3" id="3-star-3"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=4">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="4" id="3-star-4"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=5">
<span class="glyphicon glyphicon-star-empty star inline" data-hack="3" data-rating="5" id="3-star-5"></span>
</a>
</div>
Here's my Javascript:
javascript:
$('span.star').hover(function() {
hack_id = this.dataset.hack;
rating = this.dataset.rating;
for (i = 1; i <= 5; i++) {
if (i <= rating) {
$('#' + hack_id + '-star-' + i).addClass('star-active');
} else {
$('#' + hack_id + '-star-' + i).removeClass('star-active');
}
}
});
Now, when I hover over the star(s) it applies the class just fine and also removes the class of those stars that are not needed.
My last problem though is that once the class(es) were applied and I move my mouse somewhere else, it does not undo the changes.
I pretty much need some kind of:
if (not hovering over any star)
remove all classes set before
endif
I know this is a very basic task but I can not seem to get through it.
Thank you all in advance!
you can use jquery's mouseout(): http://api.jquery.com/mouseout/
also, instead of using jquery to apply classes you can simply define in your css
.star-active:hover{
/*whatever you have in .start-active now*/
}
then you won't need any jquery/js for this