Blueimp gallery with both images and youtube video - javascript

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>

Related

How to run the same Javascript code on a single page, with different directions ( owl carousel)?

I'm very new to Javascript so appreciate your help! I created this Owl slider (there are 2 sliders in this code), but want the second carousel to slide in the opposite direction. So the first carousel should slide left to right, and the second from right to left. However, when I add the direction:rtl to the code, it affects both carousels instead of just the bottom one. How can I amend the code so that both carousels slide in opposite directions?
You can view the codepen here --> https://codepen.io/ellie-oop/pen/KKmWLOQ or the code is copied below (HTML, JS, CSS)
Thanks!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flip Carousel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
<div class="owl-carousel">
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
<div class="content-details fadeIn-top">
<h3>Phillip Richards</h3>
<p>Managing Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
<div class="content-details fadeIn-top">
<h3>Robert Rich CFP®</h3>
<p>Director and Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
<div class="content-details fadeIn-top">
<h3>Rohan Gorringe</h3>
<p>Practice Principal</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
<div class="content-details fadeIn-top">
<h3>Ray Kan</h3>
<p>Senior Financial Advisor & Head of Investments</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
<div class="content-details fadeIn-top">
<h3>Sanjeev Sharma</h3>
<p>Senior Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
<div class="content-details fadeIn-top">
<h3>Michael Sauer CFP®</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
<a href="https://calendly.com/endorphinwealth" target="_blank">
<div class="ewmcontent-overlay"></div>
<img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
<div class="content-details fadeIn-top">
<h3>Alexander Rankin</h3>
<p>Financial Advisor</p>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
Javascript
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
center: true,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:false,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:3,
nav:false
},
1000:{
items:3,
nav:false
}
}
})
})
</script>
CSS
*, *:before, *:after{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
body{
font-size: 16px;
}
.main-title{
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.ewmcontainer{
padding: 1em 0;
float: left;
width: 100%;
}
#media screen and (max-width: 640px){
.ewmcontainer{
display: block;
width: 100%;
}
}
#media screen and (min-width: 900px){
.ewmcontainer{
width: 100%;
}
}
.ewmcontainer .title{
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.ewmcontent {
position: relative;
width: 95%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.ewmcontent .ewmcontent-overlay {
background: #0070bb;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.ewmcontent:hover .ewmcontent-overlay{
opacity: 0.9!important;
z-index: 1;
}
.content-image{
width: 100%;
}
.content-details {
position: absolute;
z-index: 2;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.ewmcontent:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-top{
top: 20%;
}
You can create one $(document).ready(function() for each carousel, with a unique html element ID (<div id="example-carousel">) so each script call only one single carousel. You can also use unique class names (<div class="example-carousel">) Each carousel can now take in a different configuration object. For example:
$(document).ready(function(){
$("#carousel-top").owlCarousel({
config: etc
}
})
})
$(document).ready(function(){
$("#carousel-bottom").owlCarousel({
config: etc
}
})
})

My Bootstrap Image Carousel is sort of sliding twice for each slide on Mobile devices

This is quite a difficult issue to explain without seeing it so I will include a link to where you can view the website so you can see for yourselves.
Basically, my Bootstrap image slide works perfectly on my desktop, however, when I view it on my iPhone X each slide sort of slides twice (or bounces?) for each transition.
It might be worth noting that it does NOT do this when I view it on an iPhone 7 (it works perfectly).
I cannot for the life of me work this out, and have tried researching it but appears no one has posted this same issue before...
It seems like an iPhone issue and hopefully the fact that it works on an iPhone 7 but not an iPhone X could help solve it?
Website Link
/* Jumbotron Carousel */
.preload {
display: none;
}
.carousel-inner .carousel-item {
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
transition: transform 0.4s ease, -ms-transform 0.4s ease;
transition: transform 0.4s ease, -o-transform 0.4s ease;
transition: transform 0.4s ease, -moz-transform 0.4s ease;
}
.jumbotron .container {
height: 500px;
}
.carousel-inner {
width: 100%;
height: 450px;
}
.carousel-indicators:hover {
cursor: pointer;
}
.carousel-control-next {
height: 0;
top: 50%;
}
.carousel-control-prev {
height: 0;
top: 50%;
}
.carousel-control-prev-icon {
opacity: none;
}
.carousel-control-next-icon {
opacity: 2;
}
#slide1 {
background-color: black;
background-image: url(/images/home1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
#slide2 {
background-color: black;
background-image: url(/images/home2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
#slide3 {
background-color: black;
background-image: url(/images/home3.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.carousel-indicators {
bottom: -10%;
position: absolute;
}
#jumbo-btn {
background-color: #e4381C;
border-color: #e4381C;
}
<!-- Carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="myslider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div id="slide1" class="jumbotron">
<div class="container">
<div class="row">
<div id="slide1-text" class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div id="slide2" class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="#" role="button">View Stock</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div id="slide3" class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
<h1>text</h1>
<p>text</p>
<a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The slideshow END -->
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myslider" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myslider" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Left and right controls END -->
</div>
<!-- Carousel END -->
Same bug on the latest version of bootstrap...
The content slide twice.
My workaround is to use a custom slide-fade affect explained here:
https://silvawebdesigns.com/how-to-change-the-bootstrap-4-carousel-to-a-fade-transition-instead-of-slide/
I believe this is related to the version of bootstrap 4 you are using if you upgrade to the latest version 4.5.2 this should solve the issue.

Position item in a container

I am working on a new project where I have 4 testimonials displayed in a carousel. I want to have the user details displayed in the same spot on every slide of the carousel. However, the sections will be different on every slide since the testimonials don't have the same length.
Here is an image of my desired result.
What is the best way to do this?
Kind regards,
.asked {
height: 450px;
padding: 50px;
background: #152026;
transition: all 0.3s;
border-radius: 10px;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
border: 5px solid transparent;
}
#pricingbox {
height: 100%;
}
.user {
position: absolute;
margin-top: 20px;
}
<div class="row">
<div class="col-xl-8 mx-auto">
<div class="testimonial owl-carousel">
<div class="asked">
<p>“I joined a few months back and this group has helped me become successful in copping many drops - Yeezy, Off-White, Supreme, etc. Didn’t know becoming a reseller was in a league of its own. Also, BRICKS don’t exist here. We profit off everything!”</p>
<section class="user">
<div class="media align-items-center">
<img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
<div class="media-body">
<h3>SilveR</h3>
<h4>Nexus Resell Member</h4>
</div>
</div>
</section>
</div>
<div class="asked">
<p>“This group has really helped me make a lot of profit, everyone is really friendly and helpful.”</p>
<section class="user">
<div class="media align-items-center">
<img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
<div class="media-body">
<h3>xDyzzii</h3>
<h4>Nexus Resell Member</h4>
</div>
</div>
</section>
</div>
<div class="asked">
<p>“Been in the group since beta, friendly staff and users, very good atmosphere top info and support”</p>
<section class="user">
<div class="media align-items-center">
<img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
<div class="media-body">
<h3>Ravio</h3>
<h4>Nexus Resell Member</h4>
</div>
</div>
</section>
</div>
<div class="asked">
<p>“Best cook group I have been a part of. Extremely professional and success driven. Always has someone there to help. Tons of knowledge and tips...best cook group online”</p>
<section class="user">
<div class="media align-items-center">
<img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
<div class="media-body">
<h3>Mwilmore</h3>
<h4>Nexus Resell Member</h4>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
Using display: flex you can keep the paragraph of text aligned to the top and the user information aligned to the bottom.
I removed position: absolute; from the .user section.
.asked {
height: 200px;
padding: 50px;
background: #152026;
transition: all 0.3s;
border-radius: 10px;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
border: 5px solid transparent;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#pricingbox{
height: 100%;
}
.user{
margin-top: 20px;
}
<div class="row">
<div class="col-xl-8 mx-auto">
<div class="testimonial owl-carousel">
<div class="asked">
<p>“Best cook group I have been a part of. Extremely professional and success driven. Always has someone there to help. Tons of knowledge and tips...best cook group online”</p>
<section class="user">
<div class="media align-items-center">
<img class="mr-4 align-self-center" src="assets/img/user.png" alt="">
<div class="media-body">
<h3>Mwilmore</h3>
<h4>Nexus Resell Member</h4>
</div>
</div>
</section>
</div>
</div>
</div>
</div>

How to create a grid of photos where you can hover them and they will change into other photos?

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');
}

Responsive Circle images?

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.

Categories