I am facing a strange bug on javascript which I have tried different ways to solve it but in this case, it has beaten me. The idea of this code is to show the available gallery of photos when the user presses the element tag h5 '<h5 class="m" id="myelem">Galery of photos</h5>', then the website shows the galery with SweetAlert2 and Bootstrap.
So when I do click to the h5 element it runs the function called sweetCarousel which shows the gallery of photos. At this time I am calling the function in this way sweetCarousel.bind(this, ...) to receive the parameters, in this case, the URL from the photos.
I am injecting HTML code inside the Sweetalert. As a condition the HTML inside the alert changes depending on how many photos I want to show. The interesting thing which is happening is that when I only load one photo like this:
document.getElementById("myelem").addEventListener("click", sweetCarousel.bind(this, "./img/image1.jpg"));
The browser set the parameters value on this way:
img1 = "./img/image1.jpg", img2 = MouseEvent {isTrusted: true, screenX: 449, screenY: 442, clientX: 449, clientY: 339, …}, img3 = ""
So the first conditional if (img2.length == 0) { skips it and goes to the second conditional if (img3.length == 0) {.
I do not know why is happening this bug. I planned to evaluate the code in the first conditional as I only passed one image as a parameter
function sweetCarousel(img1, img2 = "", img3 = "") {
if (img2.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> </div> <!-- Controls --> </div></div>';
} else if (img3.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
} else {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <div class="item"> <img src="' + img3 +'"> </div> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
}
Swal.fire( {
html: eee,
width: '50%',
background: "black !important",
showCloseButton: true,
showCancelButton: false,
showConfirmButton: false,
focusConfirm: false
});
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});
}
This is the expected behavior. When you provide an event listener to the addEventListener() method, the listener must implement the EventListener interface.
So if you want to provide additional arguments to the listener, I suggest you to use closures.
document.getElementById("trigger1").addEventListener("click", eventListener( ["./img/image1.jpg"]).bind(this));
document.getElementById("trigger2").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg"]).bind(this));
document.getElementById("trigger3").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg","./img/image3.jpg"]).bind(this));
function eventListener(images){
return function(event){
console.log('images', images);
console.log('event', event);
}
}
<button id="trigger1">Trigger 1</button>
<button id="trigger2">Trigger 2</button>
<button id="trigger3">Trigger 3</button>
And also I suggest you to pass images as an array instead of passing them as separate arguments. By using array, you can replace if/else blocks with a loop to create a more generic function. Imagine that you will want to provide 50 images in future, then you will have to create 50 if/else blocks. You can do it as followings:
document.getElementById("trigger").addEventListener("click", eventListener(["./img/image1.jpg", "./img/image2.jpg", "./img/image3.jpg"]).bind(this));
function eventListener(images) {
return function(event) {
const indicators = images.map(function(image, index) {
return `
<li
data-target="#carousel-example-generic"
data-slide-to="${index}"
${index === 0 ? `class="active"` : ``}
></li>
`
})
const imageItems = images.map(function(image, index) {
return `
<div class="item ${index === 0 ? `active` : ``}">
<img src="${image}">
</div>
`
})
const carousel = `
<div class="">
<div class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
${indicators}
</ol>
<div class="carousel-inner" role="listbox">
${imageItems}
</div>
<!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
`
console.log(carousel)
}
}
<button id="trigger">Trigger</button>
Related
I'm using angular 5. I write bellow http.get method to get data from api in angular 5. I want to get the url of image to use this in my slider.
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result) => {
this.images = result;
console.log(this.images);
})
}
but I'm getting data from api which id based below is my response
{
status:"success",
…
}img:[
{
id:"1",
banner:"/upload/img.jpg"
},
…
]0:{
id:"1",
banner:"pload/img.jpg"
}1:{
id:"2",
banner:"load/img2.jpg"
}2:{
id:"3",
banner:"/admin/upload/img3.jpg"
}status:"success"
this my html template. I don't know is this right or wrong.
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<button ></button>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" *ngFor="let image of images">
<img src="{{image.banner}}">
</div>
<!-- <div class="item">
<img src="http://asianstylemagazine.com/wp-content/uploads/2016/04/housefull-1.jpg" alt="Chicago">
</div>
<div class="item">
<img src="https://www.artsfon.com/large/201705/97685.jpg" alt="New York">
</div>
</div> -->
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
I'm getting this after using result.img
I'm beginner to angular please help. Thank you.
In ts take the object as given below,
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result) => {
this.images = result.img; // store the img array in this.images
})
}
The images variable will have the img array.
Now go to your template and use *ngFor
Example:-
<div *ngFor="let image of images">
<img src="{{image.banner}}" alt="banners">
</div>
image in ngFor will iterate through your array img and get all the urls.
Hope this helps
You need to make sure you get the correct data
getImages(){
this.httpclient.get('blabla/banner.php').subscribe((result : any) => {
this.images = result.img;
})
}
Also, in your carrousel, you need to make sure that only one item is active at the beginning (for now, all items have the active class)
<div class="item" [ngClass]="{'active': i==0}" *ngFor="let image of images; let i = index">
I need to create a slide when the image is first the left arrow should be hide and when the last image is active right arrow should be hide. I had added my code here. Is there any other alternative method to replace or any new method. Is there any option to modify the code, Can anyone point me in the right direction?
$("[id^=viewDocs]").on("click", function () {
var docId = $(this).attr("id");
var docIndex = docId.substr(docId.length - 1);
var activeItemId = $(this).data("value");
$("div>div.item").removeClass("active");
$("#"+activeItemId).addClass("active");
var appName = $('#SavepatientResultsDetails_appName').val();
var paramValue = $(this).data("id");
$("#myModal").removeClass("hidden");
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
var modal = document.getElementById("myModal");
modal.style.display = "block";
});
$('#myCarousel').on('slide.bs.carousel', function (ev) {
var itemId = ev.relatedTarget.id;
var paramValue = $('#'+itemId).data('value');
var appName = $('#SavepatientResultsDetails_appName').val();
$('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
});
.carousel-inner > .item > img,
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="downloadDocId" href="/doctorclinic/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId=100250">
<span class="download-file" onclick="document.getElementById('myModal').style.display='none'"><i class="glyphicon glyphicon-download-alt"></i></span>
</a>
<a id="downloadDocId" href="#">
<span class="close-popup" onclick="document.getElementById('myModal').style.display='none'">×</span>
</a>
<div class="modal-content1" id="img01">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li id="indicator1" data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li id="indicator2" data-target="#myCarousel" data-slide-to="1" class=""></li>
<li id="insesrtIndicator" class="hidden"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="insertCarouselItem" class="hidden"></div>
<div class="item active" data-value="100250" id="docPdf1">
<div id="pdfDoc1">
<canvas height="841" width="595" style="display: block;"></canvas>
</div>
</div>
<div class="item" data-value="100301" id="docImage2"></div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
You can use these JavaScript codes.
First:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
Second
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
$('#myCarousel').on('slid', '', checkitem);
$(document).ready(function(){
checkitem();
});
function checkitem()
{
var $this = $('#myCarousel');
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
Here I used the second JavaScript example and made what you want:
$('.left').hide();
$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
var carouselData = $(this).data('bs.carousel');
var currentIndex = carouselData.getActiveIndex();
if (currentIndex >= 1) {
$('.left').show();
}
else {
$('.left').hide();
}
if (currentIndex === (carouselData.$items.length-1)) {
$('.right').hide();
$('.left').show();
}
else {
$('.right').show();
}
})
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="//placehold.it/1024x600" class="img-responsive">
<div class="carousel-caption">
one
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/999" class="img-responsive">
<div class="carousel-caption">
two
</div>
</div>
<div class="item">
<img src="//placehold.it/1024x600/bbb" class="img-responsive">
<div class="carousel-caption">
three
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Hope it'll helps you. Good luck! :)
How to add progress bar to bootstrap carousel and give each item different interval and preserve the on hover carousel pause characteristic?
I have try many time to combine both together, but it is not working smoothly, the jquery animate always run faster than setInterval, and i don't know how to stop the animate on progress bar when hover on the carousel.
Anyone know how to do this?
here is my work:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
...
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#php
$intervals = [
'1000', '2000', '3000', '4000'
];
#endphp
#foreach ($intervals as $interval_key => $interval)
<div class="item #if ($interval_key == 0) active #endif" data-interval="{{$interval}}" data-last-item="#if ((count($intervals) - 1) == $interval_key) true #else false #endif">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
{{$interval_key}}
</div>
</div>
#endforeach
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="progress_bar">
<div class="percentage">
</div>
</div>
here is my javascript:
var t;
var start = $('#myCarousel .carousel-inner .item.active').data('interval');
console.log(start);
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", (start - 1000));
$(".progress_bar .percentage").animate({'width':'100%'}, start);
$(".progress_bar .percentage").animate({'width':'0%'}, 30);
$('#myCarousel').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration =$('#myCarousel .carousel-inner .item.active').data('interval');
console.log(duration);
$('#myCarousel').carousel('pause');
t = setTimeout("$('#myCarousel').carousel();", (duration - 1000));
$(".progress_bar .percentage").animate({'width':'100%'}, duration);
$(".progress_bar .percentage").animate({'width':'0%'}, 30);
});
$('.carousel-control.right').on('click', function(){
clearTimeout(t);
});
$('.carousel-control.left').on('click', function(){
clearTimeout(t);
});
I am using bootstrap as a framework for a website I am helping with. On the front page of the website is a carousel. For some odd reason, the carousel "slide" transition is very smooth when clicking on the left arrow (PREVIOUS); however it seems to go all weird when clicking the right arrow (NEXT)
I've tried looking online as well as in the bootstrap files (CSS and JS)
I cannot seem to find anything. I've tried re-copying the code from the bootstrap website for carousels. Not sure what's wrong.
URL: www.acebac.org
Help? :D
Here is JQuery code:
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 5000,
pause: "false"
});
HTML code:
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"> </li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="img/bg.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg1.jpg" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg2.jpg" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
See Demo:Demo Carousel Bootstrap
I'm trying to use this template with a custom carousel.
I want the carousel to replace the default header, but when I put the carousel code there, nothing happens.
When I first tried it did appear, but the left and right arrows would not function properly.
Here is the carousel:
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
And these scripts are at the bottom of the body
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
The reason the carousel wasn't showing up is that the carousel has to be inside the header, not the header itself. Change this
<header id="myCarousel" class="carousel slide">
...
</header>
To this
<header>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
...
</div>
</header>
The previous and next buttons aren't working because your page has a smooth scrolling plugin. Just change this line
$('a[href*=#]:not([href=#])').click(function() { ... }
So that it filters out the carousel buttons, like so
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() { ... }
(Demo)
Take a look at this Fiddle.
I set the fiddle up with the template and have a Bootstrap carousel fullscreen in place of the image.
The issue why you could not get it to work was because the template site uses a scroll-to in the menu links.
It was a simple fix, all that was needed was to swap the tags to div.
You could use <button>but this would have a shaded gray edge area in from each side.
<!-- Left and right controls -->
<div class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</div>
<div class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</div>