Change picture when I hover over the picture's overlay - javascript

I want to change the specific picture that I hover over. However, each pictures is underneath an overlay.
I found a solution to change the picture when I hover over the picture itself.
However, I only can hover over the overlay (parent div to the picture).
<script type='text/javascript'>
$(document).ready(function(){
$(".overlaydiv").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
I'm new with Javascript and very thankful any help.

Well, if your picture is in the said overlay, here's the code:
$(document).ready(function(){
$(".overlaydiv").hover(
function() {$(this).find('img').attr("src","images/aboutR.png");},
function() {$(this).find('img').attr("src","images/about.png");
});
});
This should update all <img> tags src attributes that are within the .overlaydiv.
If you have multiple image in your overlay, and each should have a specific "new" image on hover, you can add new src as attribute on each image tag, and change your JS to use this new url contained in your attribute to change the img src (instead of hardcoding new URL in your JS).
Example:
<div class="overlaydiv">
<img src="img1.jpg" default-src="img1.jpg" hover-src="img1-2.jpg>
<img src="img2.jpg" default-src="img2.jpg" hover-src="img2-2.jpg>
</div>
Javascript:
$(document).ready(function(){
$(".overlaydiv").hover(
function() {
$(this).find('img').each(function( index ) {
$(this).attr('src', $(this).attr('hover-src'));
});
},
function() {
$(this).find('img').each(function( index ) {
$(this).attr('src', $(this).attr('default-src'));
});
});
});
This is a bit more flexible, and prevent hardcoding URL in your JS. It's also make it compatible with multiple image, having different version on overlay hover.
Note that we need default-src attribute to be able to "remember" the original src to set back on hover leave (after hover callback, when user moving out). You could achieve the same using .data() to remember the default-src.

You can do it with pure CSS in multiple ways:
Using img elements:
div {
display: inline-block; /* or "inline-flex", "inline-grid" */
position: relative;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: Aqua;
opacity: .5;
}
.hidden, div:hover .shown {display: none}
.shown, div:hover .hidden {display: block}
<div>
<img class="shown" src="https://placehold.it/200x200" alt="">
<img class="hidden" src="https://dummyimage.com/200x200" alt="">
</div>
Using background: url():
div {
position: relative;
width: 200px;
height: 200px;
background: url(https://placehold.it/200x200), url(https://dummyimage.com/200x200) no-repeat;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: Aqua;
opacity: .5;
}
div:hover {
background-size: 0, cover;
}
<div></div>
Mix of both:
div {
width: 200px;
height: 200px;
position: relative;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: Aqua;
opacity: .5;
}
img {display: block}
div:hover img {display: none}
div:hover {background: url('https://dummyimage.com/200x200') no-repeat}
<div>
<img src="https://placehold.it/200x200" alt="">
</div>

Related

How can I implement JS so that when I hover an image in a gallery it affects every other image except the hovered image?

I am creating an image thumbnail gallery where each thumbnail will be a link to a full size image on another page. So far when a user hovers over an image a red box covers the image using a CSS ::before pseudo class.
.overlay {
position: relative;
display: inline-block;
}
.overlay>img {
vertical-align: middle;
}
.overlay::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: red;
transition: 0.2s ease;
opacity: 0;
}
.overlay:hover::before {
opacity: 1;
}
<div class="overlay"><img src="https://via.placeholder.com/280x280"></div>
<div class="overlay"><img src="https://via.placeholder.com/333x111"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x333"></div>
<div class="overlay"><img src="https://via.placeholder.com/222x222"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x172"></div>
I would like to change the interaction so that when a user hovers on an image, every other image in the gallery (with an 'overlay' class) will be covered by the red box, except for the image being hovered over. This would create a focus on the image being hovered over by covering the other images with red.
It seems Javascript would be the best way to make this work, how can I implement js with what I've already written?
I was also trying out CSS :not pseudo but having trouble making it work.
$('.overlay').hover(fnOver, fnOut)
function fnOver() {
$('.overlay').not(this).addClass('active')
}
function fnOut() {
$('.overlay').not(this).removeClass('active')
}
.overlay {
position: relative;
display: inline-block;
}
.overlay>img {
vertical-align: middle;
}
.overlay::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: red;
transition: 0.5s ease;
opacity: 0;
}
.active::before {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay"><img src="https://via.placeholder.com/280x280"></div>
<div class="overlay"><img src="https://via.placeholder.com/333x111"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x333"></div>
<div class="overlay"><img src="https://via.placeholder.com/222x222"></div>
<div class="overlay"><img src="https://via.placeholder.com/111x172"></div>

Fullscreen image view not behaving correctly after scrolling

I've created a full-screen image viewer as follows...
At the top of my <body> tag I have the following:
<div id="backdrop" class="hide"></div>
I then have some <img> tags that are toggled via JavaScript.
<img id="1" onClick="toggleSelect(1)" src="thumb.jpg" class="small" />
<img id="2" onClick="toggleSelect(2)" src="thumb.jpg" class="small" />
<img id="3" onClick="toggleSelect(3)" src="thumb.jpg" class="small" />
CSS:
#backdrop {
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000000;
}
.hide {
display: none;
}
.show {
display: block;
}
img.small {
cursor: pointer;
position: relative;
height: 300px;
width: auto;
z-index: 999999;
}
img.big {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
z-index: 1000001;
}
The images and the backdrop basically have their classes toggled:
<script type="text/javascript">
toggleSelect: function(index) {
if (images[index].selected)
{
$("#"+index).addClass('small');
$("#"+index).removeClass('big');
$("#backdrop").addClass('hide');
$("#backdrop").removeClass('show');
images[index].selected = false;
}
else {
$("#"+index).addClass('big');
$("#"+index).removeClass('small');
$("#backdrop").addClass('show');
$("#backdrop").removeClass('hide');
images[index].selected = true;
}
}
</script>
This all works well and good as you can see here:
However, if I scroll down and then toggle the image, you can see it's problematic:
Given this situation, is there any easy or convenient way to get the image to go fullscreen (90% height as set in the CSS) regardless of my current scroll position?
Thanks in advance for any help.
Try by setting overflow hidden to body, when image is fullscreen:
<script type="text/javascript">
toggleSelect: function(index) {
if (images[index].selected)
{
$("#"+index).addClass('small');
$("#"+index).removeClass('big');
$("#backdrop").addClass('hide');
$("#backdrop").removeClass('show');
$('html, body').css({overflow: 'auto'});
images[index].selected = false;
}
else {
$("#"+index).addClass('big');
$("#"+index).removeClass('small');
$("#backdrop").addClass('show');
$("#backdrop").removeClass('hide');
$('html, body').css({overflow: 'hidden'});
images[index].selected = true;
}
}
</script>

Pre-loader Image at page load issue

I am sorry for asking a very minor thing but I feel a bit helpless in this one. I have integrated a pre-loader image at my page load in a very simple way
This is my Page link
HTML: (Div for loading Pre-loader image)
<div class="se-pre-con"></div>
Jquery to trigger the pre-loader on page load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut();
});
A bit of Styling . CSS
<style>
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}
Problem
When Page loads, it splashes before the Pre-loader image one time and then loads after the pre-loader image complete its effect. Theoretically, pre-loader should display before page load. I hope anyone of you can figure out where and what I did wrong?
Regards
I think your HTML isn't well formatted on the link you provided:
What I would do is make sure the HTML page has a structure similar to this:
<html>
<head>
<script>
</script>
</head>
<body>
<div class="se-pre-con"></div>
<div class="site-content"></div>
</body>
</html>
And inside your script tag have the following method:
$(window).load(function() {
$(".site-content").show(); //or fadeIn (what ever suits your needs)
$(".se-pre-con").fadeOut();
});
And in your css make sure you set
.site-content{
display: none;
}
EDIT: (To answer your question in comment- call loader at any time)
I would probably create a function like this:
function toggleLoader(show){
if(show == true){
$(".se-pre-con").show();
$(".site-content").fadeOut();
}
else{
$(".site-content").show();
$(".se-pre-con").fadeOut();
}
}
Then on window load you would call: toggleLoader(false),
When you make a request call: toggleLoader(true),
And when you receive a response call: toggleLoader(false).
page content is also visible on page load along with loader element so there no any sequence which content load first, but you can manger by following code, Suppose you have two div, one pre-loader div another site container div
<body>
<div class="se-pre-con"></div>
<div id="container" style="display: none;">
<!-- site content here -->
</div>
</body>
in container div add display: none style so site content cant't blink on page load.. and when page load then you can show container div, see below code
$(window).load(function() {
// Animate loader off screen
$("#container").show();
$(".se-pre-con").fadeOut();
});
Just gone thru your page link and noticed that display:none; was added to .se-pre-con as shown below. Please remove the display:none; property. It works buddy!
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}
/* page Loader dynamically call */
/* for particular div and all page */
/*html*/
<div id="divLoaderContainer">
<!--Lodar for body start-->
<div class="preLoaderPage nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for body end-->
<!--Lodar for div start-->
<div class="preLoaderDiv nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for div end-->
</div>
/*css*/
.preLoaderPage {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color: #dae3ec;
z-index: 99;
}
.preLoaderDiv {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
opacity: 1;
background-color: rgba(255, 255, 255, 0.94);
z-index: 99;
}
.preLoaderPage .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
width: 180px;
height: 180px;
}
.preLoaderDiv .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
}
/*Loader here end*/
/*JS function*/
// for full loader
function showLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").removeClass('nodisplay');
}
else {
showPartialLoader(id)
}
}
function hideLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").addClass('nodisplay');
}
else {
hidePartialLoader(id)
}
}
// for specific div loader
function showPartialLoader(id) {
var loaderdiv = $("#divLoaderContainer div.preLoaderDiv").clone();
$(loaderdiv).removeClass('nodisplay');
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').append(loaderdiv);
else {
$("div#" + id).append(loaderdiv);
}
}
function hidePartialLoader(id) {
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').find('div.preLoaderDiv').remove();
else
$("div#" + id + ' div.preLoaderDiv').remove();
}
/*call by JS*/
$.ajax({
showLoader(id);// id of div or container
success: function (data) {
// your code
},
hideLoader(id)// id of above div or container
});
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}

Javascript/jQuery - replace a video iframe with a placeholder image

I've had one question involving this piece of code answered by the very helpful people here, but now I have another one which is slightly different. I have a placeholder image which sits in a carousel slide, which when clicked on gets replaced by a youtube video using the default youtube iframe embed.
What I would like to do is, after a user has clicked on the image and has played the video, when they click away from the carousel slide the video is embedded in (for example, by clicking on a carousel arrow or pagination dot) it resets it back to how it was before the video was displayed.
I hope that makes sense. Basically, I need help reverse engineering this code so that the video gets replaced again by it's placeholder image on a click of another element/div.
Here is the HTML:
<div class="youtube_video">
<img src="img/video_poster_carousel.jpg" width="986" height="308">
<!-- <iframe width="986" height="555" src="https://www.youtube.com/embed/Wt_Ruy_ejPY?enablejsapi=1&list=PL027E2B6D9900A88F&showinfo=0&controls=1" frameborder="0" allowfullscreen></iframe> -->
</div>
And the CSS:
/* video */
.youtube_video { position: relative; padding-bottom: 31.65%; height:0; }
.youtube_video img { position: absolute; display: block; top: 0; left: 0; /*width: 100%; height: 100%;*/ z-index: 20; cursor: pointer; }
.youtube_video:after { content: ""; position: absolute; display: block;
background: url(play-button.png) no-repeat 0 0;
top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; }
.youtube_video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* image poster clicked, player class added using js */
.youtube_video.player img { display: none; }
.youtube_video.player:after { display: none; }
And the Javascript:
$(function() {
var videos = $(".youtube_video");
videos.on("click", function(){
var elm = $(this),
conts = elm.contents(),
le = conts.length,
ifr = null;
for(var i = 0; i<le; i++){
if(conts[i].nodeType == 8) ifr = conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
});
});
This below line actually does a innerHTML which means your img tag is lost
you may have to move the IMG tag out of the youtube_video container and do a hide and show toggle mechanism for the youtube_video container and the IMG tag
elm.addClass("player").html(ifr);

Css modal box z index doesnt work

I'm trying to build simple modal and for some reason the z-index doesn't work. what is the problem here?
document.addEventListener("DOMContentLoaded", function() {
var aTag = document.querySelector('.img-box');
aTag.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.add('overlay');
var img = document.createElement('img'),
modalBox = document.getElementById('modal-box')
img.src = this.href;
modalBox.appendChild(img);
})
});
.overlay {
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.4;
width: 100%;
height: 100%;
}
#modal-box {
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#modal-box img {
max-width: 100%;
}
<a href="http://placehold.it/400x200" class="img-box">
<img src="http://placehold.it/100x100" />
</a>
<div id="modal-box"></div>
Alternate demo: http://codepen.io/phpnetanel/pen/qEjJbo
The problem is that you add the .overlay class to the document body. The rest of the content is held in the document body and thus it stays on top. Create a new overlay div and add it to the body and apply the .overlay class to it.
Here's a working example: http://codepen.io/anon/pen/EaXdKw
You are applying the .overlay class to the body. This will not create an overlay above the content like you are expecting. You need to create another element.
This should do what you want.
You just need to change position to relative in place of absolute in the #modal-box and it will work

Categories