I'm working on a bootstrap carousel in which it shows the image first and then the caption slides in from the right after a few seconds.
It works but there's an issue with the first slide, where it shows the caption of the first slide when it moves to the second it only is being hidden after a second and then the new caption slides in.
This is my code:
<div class="carousel-inner">
<div class="item active">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner" data-interval="2000">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green" id="banner-change">specialists?</span></p>
<p class="slider-text">We just do ip</p>
<p class="slider-text"><span class="slider-green">exceptionally</span></p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">distinctive?</span></p>
<p class="slider-text">Market leading</p>
<p class="slider-text"><span class="slider-green"> brought to life</span> and outside london</p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Chicago">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">stand out?</span></p>
<p class="slider-text">The <span class="slider-green">only way</span> to do great work is to love what you do</p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="Los Angeles">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">the right choice?</span></p>
<p class="slider-text">holistic thinking,<span class="slider-green"> made real</span></p>
</div>
</div>
</div>
<div class="item">
<img src="test.png" alt="New York">
<div class="carousel-caption">
<div class="carousel-caption-inner">
<p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">effective?</span></p>
<p class="slider-text">Intellectual property</p>
<p class="slider-text">- <span class="slider-green"> brought to life</span></p>
</div>
</div>
</div>
</div>
</div>
And:
<script type="text/javascript">
var carouselContainer = $('.carousel');
var slideInterval = 3000;
$( document ).ready(function() {
function toggleCaption() {
$('.carousel-caption').hide();
var caption =
carouselContainer.find('.active').find('.carousel-
caption');
caption.delay(1000).toggle("slide", {direction:'right'});
}
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
});
</script>
Anybody know how I could fix this? It seems the function is only activated on the second slide, not the first.
Use https://daneden.github.io/animate.css/ like this.
you just need to change the animation class in data-animation attribute.
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-1-z'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.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.7/js/bootstrap.min.js"></script>
<div class="my-carosuel">
<div id="carousel-1-z" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1-z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1-z" data-slide-to="1"></li>
<li data-target="#carousel-1-z" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active">
<img src="http://www.placehold.it/1000x400" class="img-responsive">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft" class="heading-active">
animation test one
</h3>
<h3 data-animation="animated flip">
animation test two
</h3>
<h3 data-animation="animated slideInDown">
animation test three
</h3>
</div>
</div><!-- /.item -->
<!-- Second slide -->
<div class="item">
<img src="http://www.placehold.it/1000x400" class="img-responsive">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft" class="heading-active">
animation test one
</h3>
<h3 data-animation="animated flip">
animation test two
</h3>
<h3 data-animation="animated slideInDown">
animation test three
</h3>
</div>
</div><!-- /.item -->
</div><!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1-z" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<a class="right carousel-control" href="#carousel-1-z" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
Related
I have a message page which shows your current messages. But the problem is that, it shows only one message, and that's the "newest" message. And the first messagebar which I click it, it won't show the HTML Code, even if it removes the "No mail Selected"
Here's how it sees if I press at second message tab: https://i.imgur.com/hMjftkm.png
My problem is that, the first messagetab it won't show it's HTML code. And when I change the message tabs (clicking new one) it won't actualise the new code. It shows the same code layout.
I found that error is in javascript, at the MAILCONTENT (1 or 2), but i have no clue how to fix it
JavaScript
<script>
$(document).ready(function() {
$('.emailcontent input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
$(this).closest('.list-group-item').addClass('selected');
} else {
$(this).closest('.list-group-item').removeClass('selected');
}
});
// Clicking a message
$('.list-group-item > .media').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent').removeClass('hide');
});
$('.list-group-item > .media2').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail2').addClass('hide');
$('.mailcontent').removeClass('hide');
});
});
</script>
HTML
<div class="mainpanel">
<div class="emailcontent">
<div class="email-options">
<label class="ckbox">
</label>
</div><!-- email-options -->
<div class="list-group">
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername1</h5>
<h5>Title1</h5>
</div>
<p>Hi. There's something wri..</p>
</div>
</div>
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media2">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername2</h5>
<h5>Title2</h5>
</div>
<p>That's title2 that means yo...</p>
</div>
</div>
</div><!-- emailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Sendername1</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">MESSAGE1</h3>
<div class="email-body">
<p>Text1</p>
</div><!-- mailcontent -->
</div><!-- contentpanel --><!-- mailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Title2</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">MESSAGE2</h3>
<div class="email-body">
<p>That's message 2</p>
</div><!-- mailcontent -->
</div><!-- contentpanel --><!-- mailcontent -->
</div><!-- mainpanel -->
</div><!-- mainpanel -->
</div><!-- emailcontent -->
</div>
</div>
CODEPEN
https://codepen.io/anon/pen/KxGjWp
First: may be you should redesign your code little bit.
But if you just want it working as it is, here is solution:
html:
<div class="mainpanel">
<div class="emailcontent">
<div class="email-options">
<label class="ckbox">
</label>
</div><!-- email-options -->
<div class="list-group">
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername</h5>
<h5>Title!</h5>
</div>
<p>This is messagebar1. Clicking it will show TITLE1.</p>
</div>
</div>
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media2">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">sendername2</h5>
<h5>Title2</h5>
</div>
<p>This is messagebar2. Clicking it will show TITLE2</p>
</div>
</div>
</div><!-- emailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">SENDER1</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">TITLE1</h3>
<div class="email-body">
<p>So this should be message1</p>
</div>
<br>
<hr>
</div><!-- mailcontent -->
<div class="mailcontent2 hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">sendername2</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">TITLE 2</h3>
<div class="email-body">
<p>So there is message2 layout. But if I click messagebar1 it won't show it's content and delete this or vice-versa</p>
</div>
</div><!-- mailcontent -->
</div><!-- mainpanel -->
</div><!-- mainpanel -->
javascript:
$(document).ready(function() {
$('.emailcontent input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
$(this).closest('.list-group-item').addClass('selected');
} else {
$(this).closest('.list-group-item').removeClass('selected');
}
});
// Clicking a message
$('.list-group-item > .media').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent').removeClass('hide');
$('.mailcontent2').addClass('hide');
});
$('.list-group-item > .media2').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent2').removeClass('hide');
$('.mailcontent').addClass('hide');
});
});
So problem was that even when you hiding mailcontent2, its wrapper div is still visible and mailcontent is visible but under that empty div. I moved both mailcontent under same container div. I would suggest to you on load create an array of object that contains messages and assign to each left panel menu item id that is same as array index of that message, then you can have only one mailcontent and just assign different text to it from array.
Also use dev console in browser (usually F12) there you can hover over element and see its dimensions and location, so it was visible that second mail container is over the first one. Also there you can disable, enable and edit css fast and run javascript commands, so you can compose suitable style and see right away how it will look.
I am using bootstrap carousel thumbnail. Currently the slider clone after complete the last slider . I need to stop repeating item when my slider count less than 3. I have tried the below script. Anyone help me to achieve this .
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/homogeneous/marvel-stone/marvel-stone-detail.jpg" alt="">
</div>
</div>
</div>
<div class="clearfix">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb1.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb2.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb3.png" alt=""></div>
</div>
<div class="item">
<div class="thumb"><img src="images/homogeneous/marvel-stone/marvel-stone-thumb4.png" alt=""></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /myCarousel -->
</div>
<!-- /clearfix -->
below script I wast tried for 3 items. How to make it for one and two items with simplified script.
$('#myCarousel').carousel({
interval: false
});
var totalItems = $('.item').length;
if (totalItems > 3) {
//alert();
$('.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)).addClass('rightest');
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
} else {
//what to be here
}
[my code link]
you might be missing some css, try experiment with this code:
https://www.bootply.com/124854#
I'm having a silly problem with a slightly customised Bootstrap carousel when it has more than 10 slides. The slides in double figures are not registering when you click the thumbnails?
<div class="col-md-12" id="slider">
<div id="theGallery" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<div class="desc">
<p>This is image 1</p>
</div>
<img src="slide-1.jpg" class="img-responsive"> </div>
<!-- ... 2,3, 4 and so on -->
<div class="item" data-slide-number="10">
<div class="desc">
<p>This is image 11</p>
</div>
<img src="slide-11.jpg" class="img-responsive"> </div>
</div>
<a class="left carousel-control" href="#theGallery" role="button" data-slide="prev"> <span>Previous</span> </a> <a class="right carousel-control" href="#theGallery" role="button" data-slide="next"> <span>Next</span> </a> </div>
</div>
<!-- Thumbnails -->
<div class="thumbs hidden-sm hidden-xs">
<div class="width-auto" id="slider-thumbs">
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected"> <img src="slide-1.jpg" class="img-responsive"> </a></li>
<!-- ... 2,3, 4 and so on -->
<li> <a id="carousel-selector-10" class=""> <img src="slide-11.jpg" class="img-responsive"> </a></li>
</ul>
</div>
</div>
$(document).ready(function() {
$('#theGallery').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#theGallery').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#theGallery').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
});
Probably something really simple. Any help appreciated. Thanks in advance!
Add radix to parseInt:
id = parseInt(id, 10);
It seems quite challenging to add both the Bootstrap Carousel Slider and
Lightbox Gallery in a single page without significant issues.
Problem: When clicking on the lightbox image gallery it opens up the picture gallery and at the same time the Carousel slider image gets hijacked by the gallery images. The culprit seems to be either the classes: .item, img, or .inner-carousel
Is it possible to add both modal lighbox and carousel slider to a single page without any issues?
To recreate the issue: Click on the image gallery, the modal will pop up, close the window, and now the carousel slider has been replaced by the gallery images. http://jsfiddle.net/2aasoyej/
HTML:
<div class="container">
<div class="row">
<h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
<hr>
<div class="row">
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 1" href="#">
<img class="thumbnail img-responsive" id="image-1" src="http://dummyimage.com/600x350/ccc/969696&text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 2" href="#">
<img class="thumbnail img-responsive" id="image-2" src="http://dummyimage.com/600x350/2255EE/969696&text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 3" href="#">
<img class="thumbnail img-responsive" id="image-3" src="http://dummyimage.com/600x350/449955/FFF&text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="hidden" id="img-repo">
<!-- #image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 11" src="http://dummyimage.com/600x350/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 12" src="http://dummyimage.com/600x600/ccc/969696">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 13" src="http://dummyimage.com/300x300/ccc/969696">
</div>
<!-- #image-2 -->
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
</div>
<!-- #image-3-->
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
</div>
</div>
<div class="modal" id="modal-gallery" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Header 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">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');">
<center>
<div class="carousel-title">
<h1>Certified General Contractor</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>For all your South Florida construction needs</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');">
<center>
<div class="carousel-title">
<h1>Commercial Contruction</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Build with a company you can trust</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');">
<center>
<div class="carousel-title">
<h1>Home Renovation</h1>
</div>
</center>
</div>
<div class="carousel-caption">
<h2>Remodel your home with the best in the field</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev" style="font-size:70px;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next" style="font-size:70px;"></span>
</a>
JS:
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: 6000,
pause: "false"
});
In the $(".row .thumbnail").click(function() you are querying $('.carousel-inner') which infact matches both carousels' .carousel-inner
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
..and then you call content.empty() and content.append(repoCopy). This does affect both carousels, too, of course.
You need to be more precise here:
$(".row .thumbnail").click(function(){
var content = $("#modal-carousel .carousel-inner");
Here's the updated fiddle: http://jsfiddle.net/2aasoyej/1/
Udated fiddle that properly disables the interval for the modal carousel, as noted in comments below: http://jsfiddle.net/2aasoyej/4/
i need to a solution.
Now i have product with main image and some other photos under it.
If photos are more than 3, i need to show them like carousel, not like no in rows by 3.
Attaching img, to explain it more.
*4th,5th etc photo should be hidden in carousel.
*All images should popup if they are clicked.
You can possibly do it with Bootstrap but you need to do a bit of workaround since it is not available out of the box.
Suppose this is your HTML :
<div class="col-md-7">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4"><img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/CCCCCC&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/fcfcfc/333&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-md-4"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
Workaround JavaScript :
$('#myCarousel').carousel({
interval: 10000
})
$('.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));
}
});
Working demo here : http://jsfiddle.net/6ouybst4/
Now help yourself and implement lightbox in it :-)