I have two adjacent responsive images, each with a button that I would like to be centered in the image. Right now the buttons are just sitting below the images. Here is my code
<!--LAB1-->
<div class="row">
<div class="col-lg-2 col-md-6 col-lg-6">
<div class="view overlay">
<img class="img-fluid" src="img/lab1.jpeg" alt="Card image cap">
<div class="text center">
<a href="https://www.google.com" target="_blank" class="btn btn-secondary" role="button">Lab1 Website
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>
<div style="height: 10px"></div>
<!--LAB2-->
<div class="col-lg-2 col-md-6 col-lg-6"
<div class="view overlay">
<img class="img-fluid" src="img/lab2.jpg" alt="Card image cap">
<a href="https://www.google.com" target="_blank" class="btn btn-secondary" role="button">Lab2 Website
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>
attached an image of what I currently have
Here is a reference link you can use
https://www.w3schools.com/howto/howto_css_button_on_image.asp
Or else
Simply add below CSS code for button
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
Here is fiddle
http://jsfiddle.net/L1aknvgs/1/
Add position relative to the parent of button. Then add position absolute to the button.
.btn{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
Attached an example: CODEPEN
In bootstrap 4, You can use this as follow and in CSS the left and top percentage depend on the pixels of an image, below I provide your code with modification.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 col-lg-6">
<div class="view overlay">
<img class="img-fluid" src="https://dummyimage.com/600x400/000/fff" alt="Card image cap">
<div class="text center">
Lab1 Website
</div>
</div>
</div>
</div>
</div>
And CSS
.button_position {
position: absolute;
left: 30%;
top: 40%;
}
and here is the fiddle,
https://jsfiddle.net/vbsgfo9k/1/
Related
<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;">
</a>
</div>
</div>
I want the background image to take full height and the sub-image must align the center of the background image.
And at last it must be responsive.
Use width:100vh to make full height and use left and right make the image become center.
Use the background-size: cover to resize the background image to cover the entire container.
<div class="col-lg-12 text-center">
<div class="for-video-background" >
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" >
</a>
</div>
</div>
CSS:
body{
margin: 0;
}
img{
width:5rem;
position: absolute;
left: 47.5%;
top: 47.5%;
}
.for-video-background{
height: 100vh;
background-size: cover;
background-image: url('./assets/images/back-video.png')
}
You have to use "height:100vh"
<div class="col-lg-12 text-center">
<div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
<a href="#">
<img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;height: 100vh">
</a>
</div>
</div>
here i am using html and css i want the image and text should animate(zoom-in and zoom-out) with 5s delay.
How can i do it? I am new to this.TIA
Here is what i tried so far where as for me only image is getting animated link to stackblitz
.text-center :hover {
transform: scale(1.5);
}
<div class="container">
<div class="col-sm-3 col-md-3 col-lg-3 pt-1 text-center">
<a class="link">
<img class="img-responsive " src="https://i.picsum.photos/id/321/200/300.jpg?hmac=1hjkl5WdcOOj525LK78s0QQQkN0b_qb1_xSacNQfMSk" alt="">
<p class="text pt-2">Mytext</p>
</a>
</div>
</div>
How about this:
.text-center {
overflow: hidden;
width: 200px;
height: 200px;
}
.text-center img {
transition: all 5.0s;
}
.text-center :hover {
transform: scale(1.5);
}
<div class="container">
<div class="col-sm-3 col-md-3 col-lg-3 pt-1 text-center">
<a class="link">
<img class="img-responsive " src="https://i.picsum.photos/id/321/200/300.jpg?hmac=1hjkl5WdcOOj525LK78s0QQQkN0b_qb1_xSacNQfMSk" alt="">
</a>
</div>
<p class="text pt-2">Mytext</p>
</div>
I moved your p outside the div and added some CSS rules for the zoom effect.
I'm trying to create a grid of photos where you can hover over them and they will change into other images. I've tried placing the image on CSS as background image but when you hover, the other picture doesn't seem to be exactly the same size (when it actually is).
I also tried using two images method (one on top of the other) and it works well with only one image on the page but with a grid of images, it doesn't work because of the position: absolute.
The only way that I found that "sort of" works is by replacing one image for the other but then you don't have a smooth transition (fade into another image).
Here is the access to code pen (seems to work better):
Code:
css:
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 right">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</section>
</body>
I am not sure if this is what you were looking for.
.row {
display: flex;
flex-direction: row;
}
.flex-item {
min-width: 200px;
min-height: 200px;
}
.hover-img {
transition: background-image 1s ease-in-out;
background-size: cover;
}
.img-1 {
background-image: url(https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg);
width: 400px;
/*
height: 200px;*/
flex-grow: 2;
}
.img-1:hover {
background-image: url(http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg);
}
.img-2 {
background-image: url(http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg);
/* width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-2:hover {
background-image: url(http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif);
}
.img-3 {
background-image: url(http://donsmaps.com/clickphotos/dolnivi200x100.jpg);
/*width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-3:hover {
background-image: url(http://markcarson.com/images/SunBird-7-200x200.png);
}
.img-4 {
/*max-width:400px;*/
flex-grow: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<section class="container pages-content">
<div class="row">
<div class="flex-item hover-img img-1"></div>
<div class="flex-item hover-img img-2"></div>
<div class="flex-item hover-img img-3"></div>
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" class="flex-item img-4" />
</div>
</section>
</body>
Ok so I have been playing around with your problem for a bit. I came up with this solution: http://codepen.io/anon/pen/Rpwewg. It appears to be working the way you want it. I ran into two issues figuring it out.
The first one was that you are using the position: absolute on the images. it will place the image relative to the closest parent that is relatively positioned. Since in your example the parent div was a bootstrap class I decided to create a new div with position: relative assigned to it and gave it a class of images-wrapper.
Now I just needed to overlap the images over each other, just as you did in the example. But...If I make both images position: absolute the browser won't have an height assigned to the images-wrapper class. Therefore I decided to give one of the images a relative position and the other one absolute so it would overlap.
hope it helps :).
html
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<!--img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/-->
<!-- trying to use hover to change images-->
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> <!---->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/>
</div>
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</body>
css
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
z-index: 9;
opacity: 1;
position: relative;
}
.images-wrapper{
position: relative;
}
The best way to achieve this is to set the images as background and hover background, then set background-size:cover to keep the image display "uniform" in size. No need for Javascript code at all.
Here, I forked your Codepen for a demo. I only applied the hover effect to the first image for you to check out. Let me know if it helps.
For the "smooth transition", CSS also takes care of it for you. Feel free to change the div width (and height) to serve your needs better:
div.row div {
cursor: pointer;
transition: ease 0.5s all;
}
div.row .col-md-12:first-child {
background-image: url('https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg');
background-size: cover;
height: 200px;
margin-bottom: 10px;
}
div.row .col-md-12:first-child:hover {
background-image: url('http://donsmaps.com/clickphotos/dolnivi200x100.jpg');
}
I am trying to make an responsive web page.
I have used this question and answer, to form mine icon circle for this project.
But I would like to make it more responsive, because I need to wrap some jQuery toggle() inside.
<div class="jumbotron">
<div class="circle-container">
<div class="row">
<span data-scrollreveal="enter top, wait 1.0s">
<a href="#" class="center hvr-grow"><img src="img/specialoffers.jpg" class="img-circle" alt="">
</a>
</span>
<span data-scrollreveal="enter right, wait 1.2s">
<img src="img/circle/special.png" class="img-circle" alt="">
</span>
<span data-scrollreveal="enter right, wait 1.4s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
</span>
<span data-scrollreveal="enter right, wait 1.6s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
</span>
<span data-scrollreveal="enter left, wait 1.8s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
</span>
<span data-scrollreveal="enter left, wait 2.0s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
/* Position icons into sircle */
.circle-container {
position: relative;
width: 35em;
height: 35em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: none;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
width: 6em; height: 6em;
margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img {
display: block; width: 100%;
}
.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }
.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }
</span>
<span data-scrollreveal="enter left, wait 2.2s">
<img src="img/specialoffers.jpg" class="img-circle" alt="">
</span>
</div>
</div><!--end circle-container-->
</div>
CSS for this div:
/* Position icons into sircle */
.circle-container {
position: relative;
width: 35em;
height: 35em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: none;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
width: 6em; height: 6em;
margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img {
display: block; width: 100%;
}
.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }
.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }
I want to wrap mine images inside div's and position them to form the circle, so they become responsive.
Is that possible?
Please Help.
Tank you.
I am using bootstrap and html5boilerplate for this project.
I need to make this to be responsive., on smaller viewport it would look like this
Can you check the JsFiddle I created for you https://jsfiddle.net/1et5s06h/ to check try to resize the preview pane.
FYI my answer depends on bootstrap's Grid system and Responsive utilities. You may want to read them to get a better understanding of the grid system and responsive utility classes and to customize my answer to better fit into your needs.
Refer to the below code (that uses your css):
<div class="jumbotron">
<div class="circle-container hidden-xs hidden-sm">
<div class="row">
<span data-scrollreveal="enter top, wait 1.0s">
<a href="#" class="center hvr-grow">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" alt="">
</a>
</span>
<span data-scrollreveal="enter right, wait 1.2s">
<a href="#" class="deg0">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter right, wait 1.4s">
<a href="#" class="deg45">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter right, wait 1.6s">
<a href="#" class="deg135">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter left, wait 1.8s">
<a href="#" class="deg180">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter left, wait 2.0s">
<a href="#" class="deg225">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter left, wait 2.2s">
<a href="#" class="deg315">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
</span>
</div>
</div>
<!--end circle-container-->
<div class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
</div>
<div class="col-sm-4 col-xs-4">
<a href='#'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
</div>
</div>
</div>
</div>
Update: I made a little enhancement here that is to show grid interface only in extra small devices (xs) and centered the images within their containers by adding the following css:
div.container.hidden-lg.hidden-md.hidden-sm div.row div.col-sm-4.col-xs-4 a img.img-circle
{
display:block;margin:10px auto;
}
and I thought I'd better state the idea behind my answer more vivid: I basically create two instances of your content and using responsive utility classes I made your circle of images visible for:
Large devices (large desktops, 1200px and up) (lg)
Medium devices (desktops, 992px and up) (md)
Small devices (tablets, 768px and up) (sm)
and hide circle placement and made grid placement visible in:
Extra small devices (phones, less than 768px) (xs)
Of course, to emphasize again, my update note explains the altered code presented here.
This is the software I am using: https://github.com/blueimp/Gallery
When I click on a thumbnail that link to the video I get the error sign.
This is my HTML:
<div id="gallery">
<!-- main image -->
<ul class="thumbnails">
<li class="span12 margin-bottom-0">
<a class="thumbnail center-all" href="http://i.imgur.com/mdqQTPT.jpg" style="max-height: 375px; width: 375px;" data-gallery>
<img src="http://i.imgur.com/mdqQTPT.jpg" class="main-image">
</a>
</li>
</ul>
<!-- other images / video -->
<ul class="thumbnails">
<li class="span6">
<a class="thumbnail center-all" href="https://www.youtube.com/watch?v=zv9jHNwaV2E" style="height: 185px; width: 185px;">
<img src="http://i.imgur.com/mdqQTPT.jpg" class="additional-image">
</a>
</li>
</ul>
I've created a JSFiddle: http://jsfiddle.net/HhU4K/
When I manually enter some data to feed to blueimp, the youtube video works fine (example: http://jsfiddle.net/HhU4K/1/ EDIT: this works on my localhost but seems to just show the spinning icon on JSFiddle for me. Hope you guys are able to see the video and not just the spinning indicator.)
When I add a youtube video link to the href of the <a> tag it does not work. Any idea what I'm doing wrong?
I was struggling with this a couple of hours. Finally it works from html source. Take a look at this Fiddle Make sure to set the attribute with the youtube video id. Not just "youtube", use "data-youtube" or will not work :S
<a href="http://www.youtube.com/watch?v=zv9jHNwaV2E"
title="LES TWINS - An Industry Ahead"
type="text/html"
data-youtube="zv9jHNwaV2E"
poster="http://img.youtube.com/vi/zv9jHNwaV2E/0.jpg"
></a>
Hope this helps.
WordPress blueimp lightbox WordPress Plugins
I slightly modifyed the youtube example in the link above - this should work :)
<a href="https://www.youtube.com/watch?v=zi4CIXpx7Bg" type="text/html" data-youtube="zi4CIXpx7Bg" data-poster="http://img.youtube.com/vi/zi4CIXpx7Bg/0.jpg" data-gallery>LES TWINS - An Industry Ahead</a>
I think you just forgot the data-gallery attribute in the latter one.
<a class="thumbnail center-all" href="https://www.youtube.com/watch?v=zv9jHNwaV2E" style="height: 185px; width: 185px;" data-gallery>
<img src="http://i.imgur.com/mdqQTPT.jpg" class="additional-image">
</a>
EDIT #1
I updated your fiddle to support both images and youtube videos at once.
See this example
As of my understanding you need to instantiate the BlueImp gallery via JavaScript with a given resources JSON. I could not get it working using the HTML thumbnail list.
Though you may build this JSON based on the image thumbnails dynamically (on the fly).
Here is a code snippet which i have put together using the blueimp gallery, jquery and bootstrap.
first row is shown videos, second row is images, so you can use this as a video gallery or a photo gallery or both.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.22.0/css/blueimp-gallery.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
.ig_i5{
position: relative;
}
.ig_i6{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
background-color: rgba(0, 0, 0, 0.48);
color: white;
font-size: 16px;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.ig_i7{
position: relative;
width: 100%;
height: 100%;
}
.ig_i4 img{
width: 100%;
display: block;
}
.ig_i9{
position: absolute;
top: 50%;
left: 50%;
margin-left: -32px;
margin-top: -28px;
-webkit-transition: transform 0.2s ease-in-out;
-moz-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
font-size: 60px;
}
.blueimp-gallery>.indicator>li {
width: 40px !important;
height: 30px !important;
border-radius: 1px !important;
background-size: auto 100% !important;
opacity: 0.8!important;
}
.blueimp-gallery>.next, .blueimp-gallery>.prev {
width: 70px !important;
height: 70px !important;
line-height: 60px !important;
border-radius: 50% !important;
text-indent: 3px !important;
}
.blueimp-gallery>.prev {
text-indent: -3px !important;
}
.blueimp-gallery>.slides>.slide>.video-content>a {
margin: -47px auto 0 !important;
background-size: 110px !important;
}
.blueimp-gallery>.close {
font-size: 60px !important;
top: 35px !important;
font-weight: normal !important;
}
.ig_i10 img{
display: block;
}
</style>
</head>
<body>
<div class="container-fluid ig_i3">
<div class="row">
<div class="col-md-12">
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev show">‹</a>
<a class="next show">›</a>
<a class="close show">×</a>
<a class="play-pause"></a>
<ol class="indicator show"></ol>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 ig_i2">
<div class="ig_i1">
<h1>VIDEO GALLERY</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="thumbnail ig_i4">
<a class="ig_i10" href="https://www.youtube.com/watch?v=IVx6ZlksMJw"
data-youtube="IVx6ZlksMJw" type="text/html"
poster="http://img.youtube.com/vi/IVx6ZlksMJw/maxresdefault.jpg" title="">
<img src="http://img.youtube.com/vi/IVx6ZlksMJw/maxresdefault.jpg" alt="...">
</a>
<div class="caption">
<h4>Original Motion Picture Soundtrack</h4>
<p>List4n to #MorganMovie’s original score by Max Richter</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail ig_i4">
<a class="ig_i10" href="https://www.youtube.com/watch?v=E5ln4uR4TwQ"
data-youtube="E5ln4uR4TwQ" type="text/html"
poster="http://img.youtube.com/vi/E5ln4uR4TwQ/maxresdefault.jpg" title="">
<img src="http://img.youtube.com/vi/E5ln4uR4TwQ/maxresdefault.jpg" alt="...">
</a>
<div class="caption">
<h4>Original Motion Picture Soundtrack</h4>
<p>Listen to #MorganMovie’s original score by Max Richter</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail ig_i4">
<a class="ig_i10" href="https://www.youtube.com/watch?v=onXpKXbnbE0"
data-youtube="onXpKXbnbE0" type="text/html"
poster="http://img.youtube.com/vi/onXpKXbnbE0/maxresdefault.jpg" title="">
<img src="http://img.youtube.com/vi/onXpKXbnbE0/maxresdefault.jpg" alt="...">
</a>
<div class="caption">
<h4>Original Motion Picture Soundtrack</h4>
<p>Listen to #MorganMovie’s original score by Max Richter</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail ig_i4">
<a class="ig_i10" type="img" href="http://img.youtube.com/vi/iNJdPyoqt8U/maxresdefault.jpg" title="">
<img src="http://img.youtube.com/vi/iNJdPyoqt8U/maxresdefault.jpg" alt="...">
</a>
<div class="caption">
<h4>Original Motion Picture Soundtrack</h4>
<p>Listen to #MorganMovie’s original score by Max Richter</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail ig_i4">
<a class="ig_i10" type="img" href="http://img.youtube.com/vi/dOWFVKb2JqM/maxresdefault.jpg" title="">
<img src="http://img.youtube.com/vi/dOWFVKb2JqM/maxresdefault.jpg" alt="...">
</a>
<div class="caption">
<h4>Original Motion Picture Soundtrack</h4>
<p>Listen to #MorganMovie’s original score by Max Richter</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail ig_i4">
<a class="ig_i10" type="img" href="http://img.youtube.com/vi/YobQqmScoYs/maxresdefault.jpg" title="">
<img src="http://img.youtube.com/vi/YobQqmScoYs/maxresdefault.jpg" alt="...">
</a>
<div class="caption">
<h4>Original Motion Picture Soundtrack</h4>
<p>Listen to #MorganMovie’s original score by Max Richter</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.22.0/js/blueimp-gallery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.ig_i4').click(function (event) {
event = event || window.event;
var link = $('.ig_i4').index(this),
options = {
index: link,
event: event,
youTubeClickToPlay: false
},
links = $('.ig_i4 .ig_i10').toArray();
blueimp.Gallery(links, options);
});
$('.ig_i4').on({'mouseenter':function(){
if($(this).find('.ig_i5').length==0){
$(this).find('img').wrap("<div class='ig_i5'></div>");
if($(this).find('a').attr('type')=='img'){
$(this).find('.ig_i5').append("<div class='ig_i6'><div class='ig_i7'><i class=\"fa fa-search ig_i9\" aria-hidden=\"true\"></i></div></div>");
}else{
$(this).find('.ig_i5').append("<div class='ig_i6'><div class='ig_i7'><i class=\"fa fa-youtube-play ig_i9\" aria-hidden=\"true\"></i></div></div>");
}
var el=$(this);
setTimeout(function(){
el.find('.ig_i6').css('opacity','1');
el.find('.ig_i9').css('transform','scale(1.1)');
},1);
}
}});
$('.ig_i4').on('mouseleave',function(){
$(this).find('img').unwrap();
$(this).find('.ig_i6').remove();
});
});
</script>
</body>
</html>
I struggled to get this working, even with the code provided here.
The key I found for me - and it's not clear from the Blueimp setup on GitHub is to include the reference to the YouTube JS.
I added this reference & everything starts working.
<script src="js/blueimp-gallery-youtube.js"></script>