Placing a popup div without affecting other divs positions - javascript

I'm having troubles in making an image box(width:100%) similar to the one i have uploaded.
The problem is that: I want an image box which contains diffrent images . They are displayed in "inline-block" attribute with fixed width and height.When I click on one image a div should popup(containing that image and occupying full width.)below the image without affecting the position of other images.
Please tell me how should i place the popup div below the image without affecting other images' position.
Imagebox with different images
body,html{
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
color: #a6a6a6;
}
.clear{
clear: both;
}
.searchBox{
width:100%;
background-color: #e6e6e6;
height: 50px;
margin-top: 0;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.searchBox button{
border: none;
max-width: 12%;
min-height:40px;
background-color: #e6e6e6;
}
.search{
float: left;
}
.settings,.edit,.dots{
float: right;
}
.search img, .settings img, .edit img, .dots img {
width: 100%;
height:100%;
}
.searchBox input[type=search]{
float: left;
height: 30px;
border: none;
background-color: #e6e6e6;
font-size: 16px;
max-width: 50%;
}
.contentBox{
width: 100%;
height: 80vh;
overflow-y: scroll;
}
.box{
display: inline-block;
max-width: 100px;
max-height: 100px;
margin: 5px;
}
.box img{
width: 100%;
}
#popup{
display:none;
width:100%;
height:auto;
}
#popup img{
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>MediaValet</title>
<link rel="stylesheet" type="text/css" href="css/styles3.css" >
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
var x = false;
$('.box').on('click', function(){
if (!x){
$("#popup").show("slow").delay(500);
x = true;
}
else {
$("#popup").hide("slow").delay(500);
x = false;
}
});
});
</script>
</head>
<body>
<div class="medialibrary">
<div class="searchBox">
<button class="search"><img src="images/search-icon.png"></button> <input type="search" placeholder="Search.."></button><button class="dots"><img src="images/dots.png"></button><button class="settings"><img src="images/setting.png"> <button class="edit"><img src="images/edit.png"></button>
</div>
<div class="clear"></div>
<p>Media Library</p>
<div class="contentBox">
<div id="image1" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image2" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image3" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image4" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image5" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image6" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image7" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image8" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image9" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image10" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image11" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image12" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image13" class="box" >
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image14" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image15" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="popup"><img src="http://lorempixel.com/400/200/"></div>
</div>
</div>
</body>
</html>


By making use of each image position top and ``left values we position the popup which has much higher z-index, also on clicking any of these image we take the src value of that image and in inject this value into the #popup img src to load that image into the popup
Updated: now it is "responsive" and the whole set of rows below the popup shift down.
JS: JS Fiddle
var imgs = $('.box img'),
contBox = $('.contentBox'),
popup = $('#popup');
imgs.each(function () {
$(this).on('click', function (evt) {
var $th = $(this),
x = $th.position().left,
y = $th.position().top,
h = this.height,
winW = $(window).width(),
winH = $(window).height(),
src = $th.attr('src'),
a = 0,
last = imgs.last(),
shiftingDown = (winW/winH) * popup.height() - 5 * h,
lastY = last.position().top;
popup.detach();
imgs.each(function (index) {
var thY = $(this).position().top;
if(thY > y){
if(a == 0){
var nextRowFirstItem = $(this).parent();
popup.detach();
popup.children('img').attr('src',src);
popup.css({'display':'block'}).animate({'margin-top' : 0 });
popup.insertBefore(nextRowFirstItem);
$(this).parent().stop().animate({'margin-top' : shiftingDown});
a = 1;
}
}else if( thY == lastY){
popup.detach();
popup.children('img').attr('src',src);
popup.css({'display':'block', 'margin-top':'10px'}).animate({'margin-top' : 0 });
contBox.append(popup);
}else{
imgs.each(function (index) {
$(this).parent().stop().animate({'margin-top' : 0 });
});
}
});
});
});
popup.children('#close').on('click', function (e) {
e.preventDefault();
popup.hide();
imgs.each(function () {
$(this).parent().animate({'margin-top' : "0" });
});
});


Here is what you are expecting. Cheers!
body,html{
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
color: #a6a6a6;
height: 100%;
position: relative;
}
.clear{
clear: both;
}
.searchBox{
width:100%;
background-color: #e6e6e6;
height: 50px;
margin-top: 0;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.searchBox button{
border: none;
max-width: 12%;
min-height:40px;
background-color: #e6e6e6;
}
.search{
float: left;
}
.settings,.edit,.dots{
float: right;
}
.search img, .settings img, .edit img, .dots img {
width: 100%;
height:100%;
}
.searchBox input[type=search]{
float: left;
height: 30px;
border: none;
background-color: #e6e6e6;
font-size: 16px;
max-width: 50%;
}
.contentBox{
width: 100%;
height: 80vh;
overflow-y: scroll;
}
.box{
display: inline-block;
max-width: 100px;
max-height: 100px;
margin: 5px;
}
.box img{
width: 100%;
}
#popup{
display:none;
width:100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,0.7);
top: 50%;
margin-top: -25%;
text-align: center;
}
#popup img{
width: 75%;
height: auto;
margin: -25% auto 0 auto;
position: relative;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = false;
$('.box').on('click', function(){
if (!x){
$("#popup").show("slow").delay(500);
x = true;
}
else {
$("#popup").hide("slow").delay(500);
x = false;
}
});
});
</script>
<div class="medialibrary">
<div class="searchBox">
<button class="search"><img src="images/search-icon.png"></button> <input type="search" placeholder="Search.."></button><button class="dots"><img src="images/dots.png"></button><button class="settings"><img src="images/setting.png"> <button class="edit"><img src="images/edit.png"></button>
</div>
<div class="clear"></div>
<p>Media Library</p>
<div class="contentBox">
<div id="image1" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image2" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image3" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image4" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image5" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image6" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image7" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image8" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image9" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image10" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image11" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image12" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image13" class="box" >
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image14" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
<div id="image15" class="box">
<img src="http://lorempixel.com/400/200/">
</div>
</div>
</div>
<div id="popup"><img src="http://lorempixel.com/400/200/"></div>
Working jsfiddle

Related

Cant make a slider

   I cant make a button change images
 This Is my HTML.
.slider {
&__wrapper {
background-color: #eeeeee;
padding: 0 10%;
margin-top: 2.6%;
}
&__image1 {
width: 100%;
}
&__myslides {
background-color: white;
}
&__image2 {
width: 100%;
display: none;
}
&__image3 {
width: 100%;
display: none;
}
&__buttons {
text-align: center;
background-color: black;
opacity: .5;
}
&__buttons button {
height: 35px;
width: 35px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 5px;
}
&__buttons button:hover {
opacity: .1;
}
}
<div class="slider">
<div class="container">
<div class="slider__wrapper">
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="robot" class="slider__image1" id="image1" />
</div>
<div class="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image2" id="image2" />
</div>
<divclass="slider__myslides">
<img src="https://picsum.photos/200/300" alt="space" class="slider__image3" id="image2" />
</div>
<div class="slider__buttons">
<button class="slider__1" id="btn1">1</button>
<button class="slider__2" id="btn2">2</button>
<button class="slider__3" id="btn3">3</button>
</div>
</div>
</div>
</div>
I tried to add class active to transform display none image into Flex. It works.
i can also turn flex into none.
But i can only do it seperatly. I cant make both things happen with just One Burton.

Unequal div heights

I want to make unequal images heights and keep the layout the same on resize without changing the aspect ratio of the image on here is what i want to do :
https://i.ibb.co/nkSXJ4f/Screen-Shot-2019-04-12-at-6-32-32-AM.png
I know this is ease with css grid but i think i can make my code more simple since the layout is not complicated
What i've tried
body {
height: 100%;
}
.card {
margin-right: 20px;
margin-bottom: 2.6668rem;
display: inline-block;
vertical-align: top;
}
.medium {
width: 65%;
margin-right: 5%;
height: 600px;
overflow: hidden;
}
.small {
width: 25%;
height: 300px;
overflow: hidden;
}
img {
width: 100%;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>

Try this code
body {
height: 100%;
}
*{
box-sizing:border-box;
}
.card {
margin-right: 20px;
vertical-align: top;
height:100vh;
display: block;
overflow: hidden;
}
.medium {
width: 65%;
margin-right: 5%;
float:left
}
.small {
width: 25%;
float:left
}
.card-image { height:100%; }
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<main class="grid">
<a href="" class="card medium">
<figcaption class="caption">project title</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
<a href="" class="card small">
<figcaption class="caption">Kettle</figcaption>
<div class="card-image">
<img src="https://images.unsplash.com/photo-1554565166-cafee0896506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</div>
</a>
</main>

Add pointer to active Tab to show

I have created a video gallery to show 4 videos in a tabbed manner.
Functionality is working fine and design is also working but i need add pointer/arrow pointing to active video in the second column
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function (e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background","none");
$(this).css("background","#eee");
//code to autoplay video
//$(".hp-active-iframe")[0].src += "&autoplay=1";
//ev.preventDefault();
// alert(URL);
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
return false;
});
}
.full-container{width:100%;}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper{
padding-top:0px;
background-color:none;
max-width:1040px;
max-width:1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col{}
.hp-video-right-col a:first-child{ background-color:#ddd;}
.hp-video-right-col a:last-child{ margin-bottom:0px;}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe, .hp-embed-container object, .hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w{
background-color:#ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
overflow: hidden;
position: relative;
width:30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
overflow: hidden;
float:left;
}
.hp-video-details{
width:65%;
float:left;
}
.hp-video-title{
font-size:20px;
margin-top:0px;
margin-left:10px;
}
.hp-video-title{
font-size:13px;
font-weight:700;
padding-top:10px;
margin-top:0px;
margin-left:10px;
}
.hp-video-a{
display:inline-block;
width:100%;
margin-bottom:7px;
}
#media (max-width:991px)
{
.hp-video-left-col{
width:100%;
}
.hp-video-right-col {
width:100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1" ></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>
Edit: Code indentation fixed for code
IMAGE
CodePen https://codepen.io/anon/pen/dePoLr

You can use a class to add the triangle. I've documented in the sources what I have added/removed/changed. The HTML is untouched.
You just need to set the triangle for the initial load.
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function(e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background", "none");
$(this).css("background", "#eee");
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
/* Added */
$('.hp-video-img-w.hp-hqdefault-w').removeClass("active");
$(this).find('.hp-video-img-w.hp-hqdefault-w').addClass("active");
return false;
});
}
.full-container {
width: 100%;
}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper {
padding-top: 0px;
background-color: none;
max-width: 1040px;
max-width: 1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col {}
.hp-video-right-col a:first-child {
background-color: #ddd;
}
.hp-video-right-col a:last-child {
margin-bottom: 0px;
}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe,
.hp-embed-container object,
.hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w {
background-color: #ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
/* overflow: hidden; removed */
position: relative;
width: 30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
/* overflow: hidden; removed */
float: left;
}
/* Added */
.hp-video-img-w.hp-hqdefault-w.active::before {
content: "";
position: absolute;
left: -30px;
top: 25px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 30px;
border-color: transparent transparent transparent red;
}
.hp-video-details {
width: 65%;
float: left;
}
.hp-video-title {
font-size: 20px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-title {
font-size: 13px;
font-weight: 700;
padding-top: 10px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-a {
display: inline-block;
width: 100%;
margin-bottom: 7px;
}
#media (max-width:991px) {
.hp-video-left-col {
width: 100%;
}
.hp-video-right-col {
width: 100%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1"></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>

Can you check this:
I have added few code:
In CSS:
.hp-video-right-col a:active i.right, .hp-video-right-col a:focus i.right{
border: solid black;
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
In code inside all a tags:
<div style="float:left; padding-right:10px; padding-top:25px">
<i class="right"></i>
</div>
Working fiddle is below:
// Video Tabs script
InitPlayVideoTabs();
function InitPlayVideoTabs() {
$('.hp-video-a').click(function(e) {
// alert('inside function');
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="100%" class="hp-active-iframe" min-height="324" src="http://www.youtube.com/embed/' + URL + '?showinfo=0&autoplay=1" frameborder="0" allowfullscreen="1" ></iframe>';
$('.hp-video-a').css("background", "none");
$(this).css("background", "#eee");
//code to autoplay video
//$(".hp-active-iframe")[0].src += "&autoplay=1";
//ev.preventDefault();
// alert(URL);
$(".hp-active-video-title").html($(this).find(".hp-video-title").html());
$(".hp-active-video-date").html($(this).find(".hp-video-date").html());
$('.hp-active-iframe').attr('src', URL);
return false;
});
}
.full-container {
width: 100%;
}
.full-container {
width: 100%;
margin: 25px 0;
padding: 25px 0;
}
.content-wrapper {
padding-top: 0px;
background-color: none;
max-width: 1040px;
max-width: 1170px;
}
.hp-video-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 0px;
}
.hp-video-left-col {}
.hp-video-right-col a:first-child {
background-color: #ddd;
}
.hp-video-right-col a:active i.right,
.hp-video-right-col a:focus i.right {
border: solid black;
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.hp-video-right-col a:last-child {
margin-bottom: 0px;
}
.hp-active-iframe-wrapper {
float: left;
width: 100%;
background-color: #f5f5f5;
}
.hp-video-embed-container iframe,
.hp-embed-container object,
.hp-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hp-video-item-w {
background-color: #ccc;
}
.hp-hqdefault-w {
max-height: 66px;
max-width: 120px;
overflow: hidden;
position: relative;
width: 30%;
}
.hp-video-img-w {
position: relative;
width: 100%;
overflow: hidden;
float: left;
}
.hp-video-details {
width: 65%;
float: left;
}
.hp-video-title {
font-size: 20px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-title {
font-size: 13px;
font-weight: 700;
padding-top: 10px;
margin-top: 0px;
margin-left: 10px;
}
.hp-video-a {
display: inline-block;
width: 100%;
margin-bottom: 7px;
}
#media (max-width:991px) {
.hp-video-left-col {
width: 100%;
}
.hp-video-right-col {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-container bg-light-gray">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-7 col-sm-6 hp-video-left-col">
<div class="hp-active-iframe-wrapper hp-video-embed-container">
<iframe id='activeIFrame' class='hp-active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1"></iframe>
</div>
</div>
<div class="col-md-5 col-sm-6 hp-video-right-col">
<a class="hp-video-a" href="http://www.youtube.com/embed/WzQBSlNqs-k?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/WzQBSlNqs-k/hqdefault.jpg" style="clear:both;" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road ONE </h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/uKar-9RCRnI?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/uKar-9RCRnI/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road TWOOOOOO</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Three</h3>
</div>
</a>
<a class="hp-video-a" href="http://www.youtube.com/embed/zUTi89FhSRo?showinfo=0&modestbranding=1">
<div style="float:left; padding-right:10px; padding-top:25px"><i class="right"></i></div>
<div class="hp-video-img-w hp-hqdefault-w">
<img class="img-responsive img-center hp-scale hp-img-hqdefault" src="http://img.youtube.com/vi/zUTi89FhSRo/hqdefault.jpg" title="">
</div>
<div class="hp-video-details">
<h3 class="hp-video-title">Mr. Bean is back on the road Four</h3>
</div>
</a>
</div>
</div>
</div>
</div>
codepen : https://codepen.io/anon/pen/mLyeBP

Slideshow next image div to be cut in 40-50%

I want to have a slideshow with next image div that is to be cut in 40-50%.
It means that the next image to be shown has to be cut 40-50% so that it looks like a slideshow.
.slideshow_image_div {
height: 300px;
border: thin black solid;
width: 300px;
overflow: hidden;
}
.slideshow_image_div .slideshow_images {
float: left;
width: 45%;
margin-right: 10px;
}
.slideshow_images img {
max-width: 100%;
max-height: 100%;
}
<div class="slideshow_image_div b">
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
</div>

If you want the whole slide to appear in the same line, you can give white-space: nowrap and removed float along with giving a display: inline-block and removed the hard-coded height, so that it really looks like a slide container:
.slideshow_image_div {
border: thin black solid;
padding: 5px 0 0 5px;
width: 300px;
overflow: hidden;
white-space: nowrap;
}
.slideshow_image_div .slideshow_images {
display: inline-block;
width: 40%;
margin-right: 5px;
}
.slideshow_images img {
max-width: 100%;
max-height: 100%;
}
<div class="slideshow_image_div b">
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
<div class="slideshow_images">
<img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
</div>
</div>

Create an automatic slider

I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this?
/******************************************************************************************************/
.sliderconteainer {
width: 100%;
position: relative;
border: 2px double silver;
border-radius: 5px;
}
.thmbnail {
width: 25%;
height: 100px;
float: left;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
float: right;
left: 0;
top: 0;
opacity: 0;
}
.slide img {
height: 300px;
width: 100%;
}
.thmbnail img {
width: 100%;
height: 95%;
border: 2px solid #EEEEEE;
border-radius: 5px;
}
.content-placeholder {
width: 100%;
height: 300px;
}
.info {
background-color: black;
z-index: 99;
margin-top: -66px;
position: absolute;
width: 100%;
padding-right: 10px;
opacity: .75;
border-radius: 5px;
}
.info p {
color: #ABB3BD;
font-family: 'B Mitra';
}
.info h5 {
font-family: 'B Titr';
color: #ffffff;
}
.thmbnail:hover .slide {
opacity: 1;
}
.thmbnail:hover .thmbnail img {
border: 2px solid #56656E;
}
#main {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class=" sliderconteainer col-md-5 col-sm-5">
<div class="content-placeholder"></div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/SiteDesign/profile.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/8.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/8.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/image-slider-2.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/image-slider-2.jpg"/>
</div>
<div class="thmbnail ">
<div class="slide">
<img src="~/Image/Slider/Megumi-4565.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/Megumi-4565.jpg"/>
</div>
</div>
</div>

If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval
setInterval(function() {
console.log("MOVE IT");
moveLeft();
}, 1000);
As #dennis-koch mentioned, I would also have a look at plugins you may use for a slider.

Categories