Hello I'm making an Carousel bootstrap menu.
Can anybody tell me, where my bug is?
This is JS code
$.each( data.items, function( i, item ) {
if (i == 0)
$("<div>").addClass("item active").appendTo("#images");
if ((i+1) % 3 == 0)
$("<div>").addClass("item").appendTo("#images");
$("<div>").attr("id", "image-" + i).addClass("col-sm-4 text-center").appendTo(".item");
$("<a>").attr({
"href" : "#",
"class": "thumbnail",
"id" : "thumb-" + i
}).appendTo("#image-" + i);
$( "<img>" ).attr("src", item.media.m).appendTo("#thumb-" + i);
if ( i === 8 ) {
return false;
}
});
HTML code
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
<div id="carousel">
<div id="images" class="row">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- / -->
The output is like
And I need just parse these object into dives.
Like first .item div includes image-0, image-1 and image-2 (and It's class is item active)
The next .item div includes image-3, image-4, image-5 (just parse objects in 3 in a row).
Can someone help me?
Try this script wich create an item each three iterations an put subElement and image, like described in your post.
$.each(data.items, function(i, item) {
// Create a div.item each 3 iterations
if(i % 3 === 0) {
$("#images").append('<div class="item"></div>');
}
// Get the last item and append images to it
$("div.item").last().append('<div id="image-' + i + '" class="col-sm-4 text-center"></div>');
// Append a href in element
$("div#image-" + i).append('');
// Append image
$("a#thumb-" + i).html('<img src="' + item.media.m + '"/>');
});
// Then put the active class on the first item.
$("div.item").first().addClass('active');
Related
I created jquery dropdown menu in slider. and wants to change its view state like ""https://jsfiddle.net/user23435/tzrunfjd/1/"" and i added slide effect on dropdown menu like this https://ibb.co/QdRWqRy . If I click on one slide it opens but by clicking other slide the previousone close and then by clicking it again it opens,,,,,,,,How can i apply this https://jsfiddle.net/user23435/tzrunfjd/1/ into my code which is given below
html code:
<div class="carousel slide col-md-10 col-xs-12" data-ride="carousel" data-interval="false"
id="myCarousel">
</div>
jQuery Code:
$('.create-meeting-btn').click(function(){
$('.create-meeting-form').stop().slideToggle(); //stop or delay(1000)
});
$('.upcoming-btn').click(function(){
$('.upcoming-table').stop().slideToggle();
});
$('.completed-btn').click(function(){
$('.completed-table').stop().slideToggle();
});
$('#myCarousel').carousel({
pause: true,
interval: false,
});
function setMeetingCarausel() {
let meetingsCopy = utils.setSliders(Array.from(meetings));
let html = '<div class="carousel-inner no-padding">';
meetingsCopy.map((meeting, index) => {
html += `<div class="item ${index === 0 ? 'active' : ''}">`;
meeting.map(m => {
let className = m.status === 'completed' ? 'btn btn-warning btn-lg dashboard-icon' : 'btn btn-success
btn-lg dashboard-icon'
html += `
<div class="col-md-3 col-sm-6 col-xs-12" onclick="handleClickMeetingItem('${m._id}')">
<span href="" class="${className}" style="width: 200px; height: 150px;">
<p style="padding-top: 10px; font-size: 19px; font-weight: bold;">${m.subject}</p>
<p style="padding-top: 12px; font-size: 19px; font-weight: bold;">${utils.convertDate(m.date)}</p>
<p style="padding-top: 10px; font-size: 19px; font-weight: bold;">( ${m.status} )</p>
</span>
</div>
`;
});
html += `</div>`;
})
html += `
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" style="margin-left:63px; color:grey;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" style="margin-right:140px; color:grey;"></span>
</a>
`;
$('#myCarousel').html(html);
}
Use jsfiddle link html code in your jquery html variable as you want but be careful about its class names because these classes handle the functionality and use this mainmenu function in script tag as it.
function mainmenu(){
jQuery(".topm").click(function(){
jQuery('.content').slideUp("fast");
jQuery(this).find('.content').slideDown("fast");
});
}
but call this mainmenu function in the end of your setMeetingCarausel function. This mainmenu function call inside the setMeetingCarausel not outside.
jQuery(document).mouseup function use as it, in the end of script tags.
I have created a separate URL for each slide of the Bootstrap Carousel. However, it currently uses numbers with a hashtag in the following way:
domain.net/pride#1
domain.net/pride#2
domain.net/pride#3
Is there a way I can have it change to what I want? Something like:
domain.net/pride#events
domain.net/pride#press
domain.net/pride#schedule
Thank You.
<script>
var url = document.location.toString();
if (url.match('#')) {
// Clear active item
jQuery('.carousel-inner div').removeClass('active');
// Activate item number #hash
var index = url.split('#')[1];
jQuery('.carousel-inner div:nth-child(' + index + ')').addClass('active');
}
jQuery('#PrideCr').bind('slid', function (e) {
// Update location based on slide (index is 0-based)
var item = jQuery('#PrideCr .carousel-inner .item.active');
window.location.hash = "#"+parseInt(item.index()+1);
})
</script>
2) by the data-name attribute
http://glebkema.ru/tasks/so-38407398.html
var url = document.location.toString();
if (url.match('#')) {
// Clear active item
$('#PrideCr .item.active').removeClass('active');
// Activate item number #hash
var index = url.split('#')[1];
$('#PrideCr .item[data-name="' + index + '"]').addClass('active');
}
$('#PrideCr').on('slid.bs.carousel', function () {
// Update location based on slide
var item = $(this).find('.item.active').data('name');
if (item) window.location.hash = "#" + item; // Doesn't work on SO
console.log(item);
})
.carousel-inner img {
height: auto;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="PrideCr" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div data-name="events" class="item active">
<img src="http://placehold.it/600x150/c69/f9c/?text=events" alt="">
</div>
<div data-name="press" class="item">
<img src="http://placehold.it/600x150/9c6/cf9/?text=press" alt="">
</div>
<div data-name="schedule" class="item">
<img src="http://placehold.it/600x150/69c/9cf/?text=schedule" alt="">
</div>
</div>
<a class="left carousel-control" href="#PrideCr" 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="#PrideCr" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
1) by the id attribute
I guess you can add the id attribute to carousel's items and use this attribute in your script. Something like this:
<div class="carousel-inner" role="listbox">
<div id="events" class="item active">
<img src="..." alt="...">
</div>
<div id="press" class="item">
<img src="..." alt="...">
</div>
<div id="schedule" class="item">
<img src="..." alt="...">
</div>
</div>
<script>
var url = document.location.toString();
if (url.match('#')) {
// Clear active item
jQuery('#PrideCr .item.active').removeClass('active');
// Activate item number #hash
var index = url.split('#')[1];
jQuery('#' + index).addClass('active');
}
jQuery('#PrideCr').bind('slid', function (e) {
// Update location based on slide
var item = jQuery('#PrideCr .item.active').attr('id');
if (item) window.location.hash = "#" + item;
})
</script>
I create carousel using bootstrap 3 like this :
HTML :
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://rivathemes.net/html/envor/img/posts/3.jpg" class="img-big">
</div>
<div class="item">
<img data-lazy-load-src="http://rivathemes.net/html/envor/img/posts/4.jpg" class="img-big">
</div>
</div>
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-angle-double-left fa-lg"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-angle-double-right fa-lg"></i></a>
</div>
</div>
and add this code for add img lazy load.
JS :
$('#myCarousel').on('slid', function () {
var $nextImage = $('.active.item', this).next('.item').find('img');
$nextImage.attr('src', $nextImage.data('lazy-load-src'));
});
But, This not work for me!? can do fix this ?
Important Q: can i add image preloader for lazy load?!
DEMO : FIDDLE
The answer by dm4web does not account for skipping slides by directly clicking the carousel indicators. This version correctly loads an image regardless of how you slide to it, using Bootstrap's event.relatedTarget (the item being slid into place, see the official documentation). Try running the snippet below and clicking on the indicators to switch several slides ahead.
var cHeight = 0;
$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
var $nextImage = $(e.relatedTarget).find('img');
$activeItem = $('.active.item', this);
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// prevents the loaded image if it is already loaded
var src = $nextImage.data('lazy-load-src');
if (typeof src !== "undefined" && src != "") {
$nextImage.attr('src', src)
$nextImage.data('lazy-load-src', '');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/5000x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5001x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5002x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5003x1000">
</div>
<div class="item">
<img data-lazy-load-src="http://placehold.it/5004x1000">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
http://jsfiddle.net/ys4je40u/
add lazy-load class to item object
use slide.bs.carousel event
CSS:
.lazy-load {
background: url("http://www.mozart.it/images/preloader.gif") center center no-repeat;
}
JQ:
var cHeight = 0;
$('#myCarousel').on('slide.bs.carousel', function (e) {
var $nextImage = null;
$activeItem = $('.active.item', this);
if (e.direction == 'left'){
$nextImage = $activeItem.next('.item').find('img');
} else {
if ($activeItem.index() == 0){
$nextImage = $('img:last', $activeItem.parent());
} else {
$nextImage = $activeItem.prev('.item').find('img');
}
}
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// prevents the loaded image if it is already loaded
var src = $nextImage.data('lazy-load-src');
if (typeof src !== "undefined" && src != "") {
$nextImage.attr('src', src)
$nextImage.data('lazy-load-src', '');
}
});
If you have multiple images in your slide, you have to use this :
var cHeight = 0;
$('#carousel').on('slide.bs.carousel', function (e) {
var $nextImage = null;
$activeItem = $('.active.item', this);
if (e.direction == 'left'){
$nextImage = $activeItem.next('.item').find('img');
} else {
if ($activeItem.index() == 0){
$nextImage = $('img:last', $activeItem.parent());
} else {
$nextImage = $activeItem.prev('.item').find('img');
}
}
// prevents the slide decrease in height
if (cHeight == 0) {
cHeight = $(this).height();
$activeItem.next('.item').height(cHeight);
}
// => Changes here !
// prevents the loaded images if it is already loaded
$nextImage.each(function(){
var $this = $(this),
src = $this.data('original');
if (typeof src !== "undefined" && src != "") {
$this.attr('src', src)
$this.data('original', '');
}
});
});
Created this "kinda generic" solution some months ago and had no issues so far...
var $ajaxCarousel = $('.carousel-ajax');
if ($ajaxCarousel.length > 0) {
$ajaxCarousel.on('slide.bs.carousel', function (e) {
var $upcomingImage = $(e.relatedTarget).find('img');
if (typeof $upcomingImage.attr('src') === 'undefined') {
$upcomingImage.attr('src', $upcomingImage.data('src'));
}
});
// preload first image
$ajaxCarousel.each(function() {
var $firstImage = $(this).find('[data-slide-number=0]').find('img');
$firstImage.attr('src', $firstImage.data('src'));
});
}
All you have to do in HTML is add "carousel-ajax" class to your existing carousel and prepend "data-" in front of your img's src tags:
<img data-src="..." />
I am using twitter bootstarp carousel in my web page. I need to show the title of next item on mouse over over the next arrow.
Html:
<div id="carousel-example-generic" class="carousel slide homecarousel" data-ride="carousel">
<!-- FIRST for slide -->
<div class="carousel-inner">
<div class="item active" title="Adult">
slider 1
</div>
<div class="item" title="Baby">
slider 2
</div>
<div class="item" title="Ingredients">
slider 3
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev" ><img src="images/arrow_left.png" alt=""></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next" ><img src="images/arrow_right.png" alt=""></a>
</div>
</div>
How to achieve this? Any help would be appreciated. Thanks.
Something like this? :
$('.carousel-control').on('mouseover', function() {
var titles = $('.carousel-inner .item').map(function(){ return this.title; });
var currentIndex = $('.carousel .active').prevAll('.item').length;
var title = titles[currentIndex + 1 > titles.length -1 ? 0 : currentIndex + 1];
if ($(this).hasClass('left')) {
title = titles[currentIndex - 1 < 0 ? titles.length - 1 : currentIndex - 1];
}
$(this).attr('title', title);
});
Fiddle
I have this html:
<div class="categories">
<div class="list-group">
<a class="root list-group-item" id="427" style="display: block;"><span class="glyphicon indent0 glyphicon-chevron-down"></span><span>Home</span></a>
<a class="list-group-item first active" id="428" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Images</span></a>
<a class="list-group-item child" id="431" style="display: none;"><span class="glyphicon indent2"></span><span>Sub category</span></a>
<a class="list-group-item first" id="429" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Videos</span></a>
<a class="list-group-item child" id="432" style="display: none;"><span class="glyphicon indent2"></span><span>Another sub</span></a>
<a class="list-group-item first" id="430" style="display: block;"><span class="glyphicon indent1"></span><span>Documents</span></a>
</div>
</div>
and what I need to do is select all elements between a.active.
To explain that a little better; a.active has a span.glyphicon with the class indent1, so I need to select the elements between indent1 and the next indent1
I attempted to use jQuery's nextAll function but couldn't get it to work correctly :(
any help would be appreciated,
/r3plica
Update 1
Thanks to Arun, here is my script which now works:
$(".glyphicon", treeRoot).on('click', function (e) {
e.stopPropagation();
var $glyph = $(this);
var $item = $glyph.parent();
var indent = $item.find(".glyphicon").prop('className').match(/\b(indent\d+)\b/)[1];
console.log($item[0].outerHTML);
console.log(indent);
if (indent != undefined) {
var $children = $item.nextUntil("a:has(." + indent + ")");
console.log($children[0].outerHTML);
if ($glyph.hasClass("glyphicon-chevron-right")) {
$glyph
.addClass('glyphicon-chevron-down')
.removeClass("glyphicon-chevron-right");
if ($children != null) $children.show();
} else {
$glyph
.addClass('glyphicon-chevron-right')
.removeClass("glyphicon-chevron-down");
if ($children != null) $children.hide();
}
}
});
Try
$('.active').nextUntil('a:has(.indent1)')
To dynamically determine the indent value
var $active = $('.active');
var indent = $active.find('.glyphicon').prop('className').match(/\b(indent\d+)\b/)[1];
var $nexts = $active.nextUntil('a:has(.' + indent + ')');
console.log($nexts)
Demo: Fiddle
Try using nextUntil()
Live Demo
$('.active:has(.indent1)').nextUntil(':has(.indent1)')
Maybe with nextUntil (from Jquery)
Look at http://api.jquery.com/nextUntil/
$('.active').nextUntil('.indent1');