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).
Related
I have an angular web page like this
this is the picture
I have no problem in web version but I want to display in another way in mobile version like title picture and text
this is an example of my code
<div class="our-company-history section-space--ptb_100">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="faq-custom-col">
<div class="section-title-wrap">
<h3 class="heading"><span class="text-color-primary">Développement Logiciel</span></h3>
<h6 class="text" [innerHtml]="cont.developement"></h6>
<p [innerHtml]="cont.developement_suite" class="text mt-30"></p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="rv-video-section">
<div class="ht-banner-01 ">
<img class="img-fluid border-radus-5 animation_images one wow fadeInDown" src="assets/images/banners/logiciel4.png" alt="">
</div>
<div class="ht-banner-02">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images two wow fadeInDown" src="assets/images/banners/logiciel3.png" alt="">
</div>
<div class="main-video-box video-popup">
<a class="video-link mt-30">
<div class="single-popup-wrap">
<img class="img-fluid border-radus-5" src="assets/images/banners/logicielb.png" alt="">
<div class="ht-popup-video video-button">
</div>
</div>
</a>
</div>
<div class="ht-banner-03">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images three wow fadeInDown" src="assets/images/banners/logiciel1.png" alt="">
</div>
<div class="ht-banner-04">
<img width="190" height="190" class="img-fluid border-radus-5 animation_images four wow fadeInDown" src="assets/images/banners/logiciel2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
I looked a lot for a method to display mode in another way in mobile version I need some help and thank you
With the given problem, I think its better if you use media queries to hide/show elements in browser. Further you may need to add few lines of html to change layout.
Or you can follow bootstrap grid layout / flex box to give it basic responsiveness.
there are a lot of references out there to solve this issue.
I'm trying to add some code in order to open a gallery when a thumbnail is selected.
Right now i have this line
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="">
</a>
</div>
........
</div>
Now, i would like to open a gallery or carousel whenever a thumbnail is selected.
It's a portfolio so each thumbnail represent something different, for example, photography, video, illustration, and so on.
Bootstrap's CSS is mostly default, same for js.
Thanks
Try this
<div class="col-lg-12 gallery">
<h1 class="page-header">Thumbnail Gallery</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="images/idee-bianco.png" alt="" onclick = "Show()">
</a>
</div>
<style>
.gallery{
display: none; // gallery is not visible normally
}
</style>
<script>
function Show(){
document.getElementsByClass('gallery').style.display = 'block';
</script>
Here when user clicks an image, you are calling the show function which manipulates the display property of the class gallery. Remember that this function will affect all elements belonging to class 'gallery'. Use id of you intend to have only one such gallery on your page.
Image hover is not working in the below code. Whenever I try to hover on a particular image that particular image is not being displayed. But if I remove the second portion (In comments in code) from code then it's working perfectly.
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">1. Meadows Towers</h2>
<div class="divider-header"></div>
<p style="text-align:justify">It is a major construction firm.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
<!--*****************Second portion*******************-->
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">2.Shangrilla</h2>
<div class="divider-header"></div>
<p style="text-align:justify"> Construction is a major construction firm.
Our goal is to reach all the section of people from 2BHK, 3BHK and 4BHK.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
</body>
Have this function which accepts target and source and changes to required target's src
function changeSrc(control,target)
{
var targets=target.children[0]; //get its children
targets.setAttribute('src',control.getAttribute('src'));//change its src
}
Your updated HTML
Instead of onmouseover="preview.src=img1.src" call function onmouseover as onmouseover="javascript:changeSrc(this,this.parentElement.nextElementSibling)"
DEMO HERE
The problem with your previous code was, there were 2 elements with same name preview and when you said preview.src it fetched list of elements and wasn't able to assign it to proper preview - element.
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'm using Blueimp gallery to present some images on my website. There are 8 images divided in two rows. The 5th thumbnail (first image on the second row) seems broken, although I can see it in the carousel presentation.
![thumbnails]:https://drive.google.com/file/d/0ByO6EWQ4CgAUaGwzbXhnWDlBWFU/view?usp=sharing
Here's the code
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links">
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<a href="img/117.jpg" class="thumbnail">
<img src="img/thumbnails/117.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/119.jpg" class="thumbnail">
<img src="img/thumbnails/119.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/120.jpg" class="thumbnail">
<img src="img/thumbnails/120.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/121.jpg" class="thumbnail">
<img src="img/thumbnails/121.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<a href="img/125.jpg" class="thumbnail">
<img src="img/tumbnails/125.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/128.jpg" class="thumbnail">
<img src="img/thumbnails/128.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/129.jpg" class="thumbnail">
<img src="img/thumbnails/129.jpg">
</a>
</div>
<div class="col-xs-2">
<a href="img/130.jpg" class="thumbnail">
<img src="img/thumbnails/130.jpg">
</a>
</div>
</div>
</div>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
Does anyone have an idea of what can be happening here. Thanks in advance!
You have a typo: change
<img src="img/tumbnails/125.jpg">
to (add the 'h')
<img src="img/thumbnails/125.jpg">
:)