I'm trying to display a div by clicking on an image. the div will contains an image or a video.
I will have several images to click on with content attached.
with my actual JS, all div are displayed when cliking on the image.
I use Custom Fields to enter my images and iframe so my code need to be dynamic.
I don't know how to fix it.
Also in my actual code the div disapear when clicking outside of it, I would like to add a text link over to close it when clicking on it.
here is mu JS :
$(document).ready(function(){
$(".mix").click(function(){
$(".photos_overlay").toggle();
});
});
My Html :
<div class="mix photos" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
and my CSS :
.photo_medias{width:233px;height:133px}
.container .mix.photos{width:233px;height:133px}
.container .mix.videos{width:233px;height:133px}
.photos_overlay{width:967px;height:384px;background-color:black;position:absolute;top:0;left:0;display:none}
.photo_medias_overlay{width:706px;height:364px}
here is JSfidlle to see it in action : http://jsfiddle.net/aaWLJ/12/
can anybody help me with this ?
Thanks a lot for your help,
I have modified your code a little:
HTML
<br />
<div class="mix photos" data-myorder="20140307">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
As you can see I have added a parent div elements for both overlays and a div CloseMe
Also I have changed some CSS (You can change it to what ever you want, I just want to show you the main idea how to resolve your issue):
.photos_overlay{
width:967px;
height:384px;
background-color:black;
position:absolute;
top:20px; /* I have changed top position just to show the div 'CloseMe'*/
left:0;
display:none
}
And the JavaScript Code
$(document).ready(function(){
$(".mix").click(function(){
ShowHide($(this));
});
$(".closeFrame").click(function(){
ShowHide($(this));
});
function ShowHide(elem){
var $mix = $(elem);
$mix.children(".closeFrame").toggle();
$mix.next(".photos_overlay").toggle();
}
});
Related
I'm trying to wrap elements except one in a popup. Everything I do doesn't work. For example.
In this div (figure or .leaflet-popup-content div) I want to wrap all text, title image, in fact everything except the figure or iframe in order to easily add some padding, without having to select all the element one by one.
<div class="leaflet-popup-content" style="width: 301px;">
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-
provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp- block-embed__wrapper">
<iframe ...></iframe>
</div>
</figure>
<h2>some title</h2>
<p>som text.</p>
</div>
I tried many ways, like :
jQuery('.leaflet-popup-content').not('.wp-block-embed-youtube
').wrapAll('<div class="inner">
</div>');
But absolutly nothings happens.
I modified the jQuery calls to get the children elements and filter out the figure.
Before:
After:
jQuery(document).ready(function(){
jQuery("#doWrap").click(function(){
jQuery('.leaflet-popup-content').children().filter(":not(figure)").wrapAll('<div class="inner"> </div>');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="leaflet-popup-content" style="width: 301px;">
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-
provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div
class="wp- block-embed__wrapper">
<iframe></iframe>
</div></figure>
<h2>some title</h2>
<p>som text.</p>
</div>
<button id="doWrap">Wrap</button>
Hi i have some code that needs to be hidden. I have tried the code below, but that not fit on my scenario.
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">Want to hid this div</div>
<div style=""/>Want to hid this div too </div>
</div>
I want to hide the last div but this div doesn't have an id or class. I also can't use the div:first(or :eq(0)').hide() method as there are lot of divs and it's not possible to tell which nth-child this div will be. Is there any method to link with zoomer div and hide it? Thanks
Both examples are with background-color: red just for the example.
You can use the :last-child pseudo-class:
#zoomer div:last-child {
background: red;
}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
Same with jquery:
$(function() {
$('#zoomer div:last-child').css('background', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
update
After the change of the question - this will hide the last 2 divs:
#zoomer div:last-child, #zoomer div:nth-last-child(2) {
background: red;
}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
You can user here :last-child, :nth-child pseudo-class
#zoomer div:last-child{display:none}
#zoomer2 div:nth-child(4){display:none;}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
<div id="zoomer2" style="margin-top:20px" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
I want to hide the last div but this div have no id or class
you can use the last-child pseudo class or last method of jquery
$("#zoomer div").last().remove();
or hide
$("#zoomer div").last().hide();
To hide the second last div also using prev
$("#zoomer div").last().prev().hide();
with css you can hide the last 2 div
#zoomer:nth-last-child(-n+2) {
display: none
}
You can use CSS :nth-child() selector or :last-child selector.
Example:
#zoomer div:nth-child(4) {
display: none;
}
<div id="zoomer">
<div class="nice">Which show image</div>
<img src="" id="img" />
<div style="">nice to see it</div>
<div>Want to hid this div</div>
</div>
Use :last-child pseudo class on #zoomer and set in display: none and it works
I have three images that each change to a second image on mouseover. On mouseover they also reset the others to the standard image. This all works fine.
However..
I would like each of the second images to be clickable links to another page.
Hope someone can help, many thanks.
$(document).ready(function(){
$('#s1').mouseover(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
So the links would need to be on click-1.png, click-2.png, click-3.png.
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" id="s1" width="300" height="300" />
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" id="s2" width="300" height="300" />
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" id="s3" width="300" height="300" />
</div>
</div>
</div>
Just make each image tag (s1, s2, and s3) a link. The actual src attribute of the img tag can change to display whatever image you want, it's really irrelevant. After all, A user can only click on something they've moused over.
I am sort of new to JS, and I'm having trouble getting my code to work exactly how I want it to.
(See JSFiddle https://jsfiddle.net/ey02227z/3/)
I have 3 images, and would like to be able to click on an image and have it show a hidden div, and then when the next image is clicked, I want it to hide the first div and show the next one.
(Click Image 1 to see HiddenContent1, Click Image2, it hides HiddenContent1 and shows HiddenContent2, etc.)
Here is My Code:
(I didn't include any JS because honestly, I don't know where to start.)
Thank you in advance!
#ImgContainer{
text-align:center;
}
.Hidden{
display:none;
}
.image:hover{
border: 1px solid purple;
}
#HiddenContentContainer{
text-align: center;
min-height:50px;
min-width:100%;
border: 1px solid teal;
}
<div id="MainContainer">
<div id="ImgContainer">
<img id="image1" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image2" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image3" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" />
</div>
<div id="HiddenContentContainer">
<h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
<div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
<div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
<div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>
</div>
This may solve your problem.
Try It
HTML
<div id="MainContainer">
<div id="ImgContainer">
<img id="image1" class="image" data-target="#Hidden1" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image2" class="image" data-target="#Hidden2" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image3" class="image" data-target="#Hidden3" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" />
</div>
<div id="HiddenContentContainer">
<h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
<div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
<div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
<div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>
JS:
//Normal hide-show
$(".image").click(function(){
$(".Hidden").hide();
$($(this).attr("data-target")).show();
});
//For Toggle same code
$(".image").click(function(){
$(".Hidden").hide();
if(!$($(this).attr("data-target")).hasClass("current")){
$($(this).attr("data-target")).show().addClass("current");
}
else{
$($(this).attr("data-target")).removeClass("current");
}
});
Here's a starting point:
// listen to clicks from any of the links
$( '#ImgContainer a' ).on( 'click', function( e ) {
e.preventDefault(); // not necessary in this case but good practice
var link = $( this ); // the link that was clicked
var index = link.index(); // its index position
$( '#HiddenContentContainer div' ).addClass( 'Hidden' ); // reset all to hidden
$( '#Hidden' + ( index + 1 ) ).removeClass( 'Hidden' ); // remove the hidden associated with this clicked link
});
Included comments to help you better understand what each line does.
I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.
<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>
i want homeArrow to be the click button to show next banner
but not sure how to connect to jquery...
This is JS fiddle:
http://jsfiddle.net/8a7GL/152/
Hide / Show one Banner at a time:
$(".homeArrow").on('click',function () {
$(".homeImage").slideToggle();
});
http://jsfiddle.net/8a7GL/152/
Sliding from left to right can be achieved by a little more code in jQuery see:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.
UPDATE:
Here is the left / right slidy.
HTML:
<div class="homeBannerContainer" style="display: block">
<div id="a1" class="homeImage">
<h4>Banner 1</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner">
<h3>My banner</h3>
</div>
</div>
<div id="a2" class="homeImage" style="display: none">
<h4>Banner 2</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner" style="display: none">
<h3>My banner 2</h3>
</div>
</div>
<div class="homeArrow">
<img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
</div>
CSS:
$(".homeArrow").on('click', function () {
$('.homeImage').animate({
width: 'toggle'
});
});
DEMO:
http://jsfiddle.net/8a7GL/174/
You can use the show/hide function provided by jquery and even give it an animation.
Just give the banners a selector and use the .click event.
http://api.jquery.com/toggle/
function change(){
$("#firstbanner").toggle();
$("#secondbanner").toggle();
}
In HTML:
<button onclick="change()" />
try this:
if ($('#Banner2Home').is(":visible")) {
$('#Banner2Home').hide();
} else {
$('#Banner2Home').show();
}
return false;