I'm trying to blur the background when I click on an image and it popup.
I already have it where it blurs a section of the page. However, you can see anything that is outside of that section not blur-out.
CSS
.content2#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
#popup{ /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active{
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
HTML
<section class="port" id="pLink">
<div class="heading" id="blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2" id="blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="../mywebsite/img/bp.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="../mywebsite/img/bp.jpg" class="img-1">
</div>
</section>
<div class="footer">
<p>Copyright</p>
</div>
JavaScript
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
I tried adding the same id="blur" to the footer but the problem is that it only works for one <div>.
I also tried adding a separate css code for let say `class="footer" but it doesn't work.
.footer#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
I also tried moving the id tag to the section, but that only blurs the heading not the rest.
All you have to do is to add a "blur" class to anyone element you want to get the effect when the image is clicked.
The changes I made:
Change in CSS #blur to .blur
JS - The function takes all elements with class .blur and has add or remove class .active
HTML - added classes .blur to all elements that need to be blurred.
In one document you can have many classes with the same name, but you can have only one element with a unique ID! This is the reason I change the blur from ID to CLASS
function toggle() {
var blur = document.getElementsByClassName('blur');
for (var i = 0; i < blur.length; i++) {
blur[i].classList.toggle('active');
}
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
.blur.active {
filter: blur(2px);
pointer-events: none;
user-select: none;
}
#popup {
/*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active {
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
<section class="port" id="pLink">
<div class="heading blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2 blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
</div>
</section>
<div class="footer blur">
<p>Copyright</p>
</div>
Related
I have the following HTML/CSS/JS code:
function addClass() {
document.getElementById('shopping-cart-body').classList.add('open');
}
function removeClass() {
document.getElementById('shopping-cart-body').classList.remove('open');
}
.cart-preview .body {
visibility: hidden;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
right: -400px;
}
.cart-preview .body .open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
<div id="blockcart-wrapper">
<div class="blockcart cart-preview">
<div class="header">
<a rel="nofollow" href="#">
<img class="cart-icon" src="https://placehold.it/100" onclick="addClass()">
</a>
</div>
<div class="body" id="shopping-cart-body">
<div class="close">X</div>
<ul>
</ul>
<div class="cart-subtotals">
<div class="products">
<span class="label">Subtotal</span>
<span class="value">0</span>
</div>
<div class="">
<span class="label"></span>
<span class="value"></span>
</div>
<div class="shipping">
<span class="label">Shipping</span>
<span class="value">0</span>
</div>
<div class="">
<span class="label"></span>
<span class="value"></span>
</div>
</div>
<div class="cart-total">
<span class="label">Total</span>
<span class="value">0</span>
</div>
<div class="checkout">
<button>Checkout</button>
</div>
</div>
</div>
</div>
I also tried to use toggle and when I alert the class list of the element, the new class is shown, but the css rule is not applied, the element gets not visible. Interesting: when alerting the class, the superclass of body (cart-preview) is missing, but the new one (open) is there.
For readability, the css only contains the two needed classes and not the whole style for the HTML part.
Can someone explain me, why this is not working?
Your css is looking for an element with css-class .open under an element with .body class. That element does not exist. If you want the css to apply to element with both classes use .body.open
.cart-preview .body {
visibility: hidden;
position: fixed;
height: 100%;
top: 0;
width: 400px;
background-color: #fff;
right: -400px;
}
.cart-preview .body.open {
visibility: visible;
transition: right 1s linear;
right: 0px;
}
I'm currently doing responsive design for the website using media queries with (max-width: 480px). Now, I have an issue of making slideToggle on jQuery from left to right. Basically, I'm adding class to element by using jQuery and styling this in CSS. However, I might assume there are other ways to make it...
But this is my approach. Please guys help me out, maybe you have some other recommendations how to solve this.
So, here is my html:
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03<br />
+7(985)427-48-55<br />
</p>
<a id="js-close" class="js-close"></a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'></a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><a href="/" ><span></span></a></li>
<li><a href="/menu/16" ><span></span></a></li>
<li><a href="/menu/3" ><span></span></a></li>
<li><a href="/menu/5" ><span></span></a></li>
<li><a href="/articles" ><span></span></a></li>
<li><a href="/menu/21" ><span></span></a></li>
<li><a href="/menu/22" ><span></span></a></li> </ul>
</div>
</div>
this is CSS
#js-close {display:block;display:none;width:35px;height:35px;margin:17px 10px; position: absolute;
right: 0;}
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; }
and this is media
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
And my jQuery:
$(document).ready(function(){
$("#js-phone").click(function(){
$('p.phone').addClass("_opened");
});
$("js-close").click(function(){
$('p_phone').removeClass("_opened");
});
});
you have some problems with your code .
in JQ you are not writing the selectors correctly ( js-close needs to have # before it , and p_phone needs to be p.phone instead )
in CSS you need to hide your p.phone with transform:translateX(-100%) and then show it when has class opened with transform:translateX(0%) . Also add transition to the p.phone so when you close it , it will have transition
check snippet below ( Open = open button , Close = close button )
i changed the JQ a bit so it's more readable and easier to change, using selector caching ( the variables ) and event targeting. hope you don't mind
P.S i removed the media query so it will work in the snippet .
check fiddle with media query > jsFiddle
var open = $("#js-phone"),
close = $("#js-close"),
phone = $('p.phone')
$("body").on("click", function(e) {
var target = $(e.target)
if (target.is(open)) {
$(phone).addClass("opened")
}
if (target.is(close)) {
$(phone).removeClass("opened")
}
})
p.phone {
transform: translateX(-120%);
position: fixed;
top: 0;
transition: 0.3s;
-webkit-transition: all 0.3s ease-out;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
background-color: #fff;
display: block;
}
.contacts {
margin-top: 100px;
}
/*#media screen and (max-width: 480px) {*/
p.phone.opened {
transform: translateX(0);
}
/*}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03
<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Open</a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</div>
Use style='display:none' for first load. And After Link click show your div and add class using addClass.
$("#js-phone").click(function() {
$('.contacts').show();
$('p.phone').addClass("_opened");
});
$(".js-close").click(function() {
$('.contacts').hide();
$('p_phone').removeClass("_opened");
});
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" >
<div class="logo" >Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts" style='display:none'>
<p class="phone">+7(499)394-46-03<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Phone</a>
<a id="js-cart" class="js-cart" href="/basket">2</a>
<a id='js-mnu' class='js-mnu'>3</a>
<a id="js-cat" class="js-cat">4</a>
</div>
As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>
Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this
I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.
JSFIDDLE:
https://jsfiddle.net/uj3uw9cp/1/
body {
color: white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
img:hover {
opacity: 0.8;
}
img:hover + #text-on-image {
visibility: visible;
}
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong>
</p>
</div>
As you can see in the example on JSFIDDLE, when someone hovers on the image, it will display a link and some text. My main problem is if someone hover on the text or links, the opacity deleted.
So I want that if someone hovers on the link or the text, the opacity will still be 0.8. Any suggestions?
Fixing opacity
That happens because when you hover the text, that will be the hovered element and the image will lost the hover. To solve this, just place the whole block into a container and place the hover selector to that element and select the contained image within it:
#container:hover > img {
opacity: 0.8;
}
Updated solution/JSFiddle
body {
color: white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
#container:hover > img {
opacity: 0.8;
}
#container:hover > img + #text-on-image {
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
Other recommendations
Keep in mind that in HTML5 elements have semantic meaning. Don't use them for their default styling. Achieve the needed style with CSS.
The <strong> element
The <strong> element represents a span of text with strong importance.
From W3C
For its style, use: font-weight: bold;
The <i> element
In some libraries <i> is used for icons, but that is against the HTML specification. Use <span> for this purpose.
The <i> element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name.
From W3C
For its style, use: font-style: italic;
As you also mentioned Javascript/Jquery, I pose another solution using it
$('img,#text-on-image').mouseenter(function(){
$('img').css('opacity', '0.8')
})
$('img').mouseleave(function(){
$('img').css('opacity', '1')
})
body {
color:white;
}
a {
color: white;
text-decoration: none;
}
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
#container:hover>img + #text-on-image {
visibility:visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
You can add visibility also in #text-on-image:hover, check below code
img:hover + #text-on-image,
#text-on-image:hover {
visibility:visible;
}
Or wrap whole item in to another div and change css to hover over div, check below code
HTML
<div class="parent">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_lItiyoxw4jXqQs4Y3rFq7jklnJEJmR-gAeue-Z8gDu8rbh3pRA" width="150" height="150">
<div id="text-on-image">
<i class="fa fa-facebook"></i>
<p><strong>TEXT</strong></p>
</div>
</div>
CSS
#text-on-image {
overflow: auto;
position: absolute;
top: 10%;
left: 5%;
z-index: 1;
transform: translate(-50%, -50%);
margin-top: -10px;
visibility: hidden;
}
.parent:hover #text-on-image {
visibility: visible;
}
Case One: https://jsfiddle.net/nikhilvkd/uj3uw9cp/8/
Case two: https://jsfiddle.net/nikhilvkd/uj3uw9cp/7/
My problem is that when attempting to log an attribute from an image, when there are multiple images on the page, I am only able to log the first attribute.
Here's a fiddle.
http://jsfiddle.net/fauverism/b9kwT/4/
CSS
#page1, #page2, #page3, #page4 {
display: inline-block;
}
.active-page {
border: 4px groove seagreen;
}
.inactive-page-unlocked {
border: 4px ridge papayawhip;
}
.modalbg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0);
z-index: 1000;
transition: all 0.2s ease-out;
pointer-events: none;
}
.modalbg .dialog {
display: inline-flex;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
margin: auto;
background-clip: contain;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.modalbg:target {
opacity: 1;
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
transition: all 0.2s ease-out;
}
HTML
<div class="main-content">
<div id="page1" class="active-page">
<a class="magnify" href="#zoomWindow100100.GIF">
<img id="100100.GIF-img" name="100100.GIF" src="http://placekitten.com/100/100">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow100100.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/100/100)"></div>
</div>
</a>
</div>
<div id="page2" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow120120.GIF">
<img id="120120.GIF-img" name="120120.GIF" src="http://placekitten.com/120/120">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow120120.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/120/120)"></div>
</div>
</a>
</div>
<div id="page3" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow140140.GIF">
<img id="140140.GIF-img" name="140140.GIF" src="http://placekitten.com/140/140">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow140140.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/140/140)"></div>
</div>
</a>
</div>
<div id="page4" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow160160.GIF">
<img id="160160.GIF-img" name="160160.GIF" src="http://placekitten.com/160/160">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow160160.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/160/160)"></div>
</div>
</a>
</div>
JavaScript
function openZoomWindow() {
$('.magnify').on('click', function() {
var nameVal = $('img').attr('id');
console.log("show_inline_exhibit","name="+nameVal);
});
}
function closeZoomWindow() {
$('.modal-container').on('click', function() {
var nameVal = $('.modalbg').attr('id');
console.log("show_inline_exhibit","id="+nameVal);
});
}
openZoomWindow();
closeZoomWindow();
Some details...
I've tried using this in various ways to no avail. I've tried using .each() .children(). No dice. I tried using onclick to instantiate the functions.
I don't have to log the id attribute. Logging the name will work just fine.
Thanks so much for reading this and thanks in advance for helping out if you're submitting code. This has had me stumped.
You need to select the element you're clicking on, so find the img inside the anchor:
var nameVal = $(this).find('img').attr('id');