I have to change the original bootstrap CSS slightly in a tab-content in order to allow for a script to run.
.tab-content>.tab-pane:not(.in) {
display: none;
}
Is not an option here since it remove the content from the dom and blocks the script from runing.
I have tried several option, the one working best so far is :
.tab-content>.tab-pane:not(.in) {
display:block !important;
height:0 !important;
}
However the transition is "jumpy", the tab replacing the previous active one disapears for a split second, bringing everything below it up then straight back down. Not smooth at all. Do I have to resort to create the whole thing from scratch or is there a fix using bootsrap ?
edit: added more code
HTML:
`
JERSEYS
BIBS & SKINSUITS
<div class="tab-content">
<div id="jerseys" class="tab-pane fade in active">
<div class="nopadding">
<div class='slider-jerseys featured-product-box'>
<div class="slide slick-slide">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
</div>
<div class="product-link">
<a class="view-product" href="">VIEW ALL JERSEYS</a>
</div>
</div>
</div>
<div id="bibs" class="tab-pane fade">
<div class="nopadding">
<div class='slider-bibs featured-product-box'>
<div class="slide slick-slide">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
<div class="slide slick-slide featured-product-box">
<img class="carousel-picture" src="Jersey-shadow.png" />
</div>
</div>
<div class="product-link">
<a class="view-product" href="">VIEW ALL BIBS & SKINSUITS</a>
</div>
</div>
</div>
`
CSS:
.tab-content>.tab-pane:not(.in) {
display:block !important;
height:0 !important;
}
Related
I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).
I have this code
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I want to replace only in the first div, <img src = "" alt = ""> with <video> <source src = ""> </ video>.
To clean up div I found this code. But not the first. This is the first problem.
$('.item").empty();
To write the new code to play the video, I should use this code:
$(".item").html('<video><source src=""></video>');
I can not write a good javascript code to do what I explained you.
ps. I can’t change the first code because it’s a default slider of image.
Thanks for the help.
If you wish to use jquery you can utilise replaceWith() and :first pseudo selector to select and repalce only the first <img>:
$(function () {
$('img:first').replaceWith('<video><source src=""></video>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Bu tyou don't need Jquery to get it done. Document.querySelector() returns only the first element that matches the specified selector and the repalce it using replaceChild(https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/):
var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Try this, querySelector() selects only One selector, the first matched selector:
document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';
You can use jQuery replaceWith() method to achieve this as below.. you can modify the selector as per your need
$('img:first').replaceWith( "<video><source src=""></video>" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I'm working on an html site with a lot of images, to reduce loading time I'm going to load hidden images when user click on the cover image with javascript, then insert it into bootstrap carousel.
I tried to make it, but unsuccessful. Images aren't load. Any help?
Here is my last code:
HTML
<li>
<a href="#" onclick="imgFilter('.ar-img')">
<img src="images/AR/01.jpg" alt="">
</a>
<div class="accordion carousel-inner">
<div class="item active">
<img src="images/AR/01.jpg" alt="slide">
</div>
<div class="item">
<img class="ar-img" src="" data-src="images/AR/02.jpg" alt="slide">
</div>
<div class="item">
<img class="ar-img" src="" data-src="images/AR/03.jpg" alt="slide">
</div>
</div>
</li>
<li>
<a href="#" onclick="imgFilter('.br-img')">
<img src="images/BR/01.jpg" alt="">
</a>
<div class="accordion carousel-inner">
<div class="item active">
<img src="images/BR/01.jpg" alt="slide">
</div>
<div class="item">
<img class="br-img" src="" data-src="images/BR/02.jpg" alt="slide">
</div>
<div class="item">
<img class="br-img" src="" data-src="images/BR/03.jpg" alt="slide">
</div>
</div>
</li>
JS
function imgFilter(id) {
var imgId = $(id);
$("imgId").each(function(i) {
$("this").setAttribute('src', $("this").getAttribute('data-src'));
});
};
Something in the lines of:
$(".item img").each(function(i) {
$("this").setAttribute('src', $("this").getAttribute('data-src'));
}
however i would use jQuery plugin lazyload instead (http://www.appelsiini.net/projects/lazyload).
Assumed you have css like:
.item{
width:200px;
height:auto;
}
.item img{
width:100%;
height:auto;
}
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.
I searched over internet that we cannot put the .carousel-left,.carousel-right in .carousel-inner. Before putting them out of the .carousel-inner it worked fine but after taking them it became like this:
And before it was this:
Here is my code:
HTML:
<div id="mySlider" class="carousel slide" style="width: 600px; height:340px;">
<div class="carousel-inner">
<div class="item active">
<img alt="" style="width: inherit; height: inherit;" src="http://getbootstrap.com/2.3.2/assets/img/examples/slide-01.jpg" />
<div class="carousel-caption">
<p>Video Caption</p>
</div>
</div>
<div class="item">
<img alt="" style="width: inherit; height: inherit;" src="http://getbootstrap.com/2.3.2/assets/img/examples/slide-01.jpg" />
<div class="carousel-caption">
<p>Video Caption 2</p>
</div>
</div>
<a class="carousel-control left" href="#mySlider" data-slide="prev">‹</a>
<a class="carousel-control right" href="#mySlider" data-slide="next">›</a>
</div>
</div>
I am using bootstrap so I don't need to mension the CSS in here :)
Please tell me how can I solve this issue?