I have three popups that appear when the page loads, and only the first one is displayed while the rest is hidden. Each popup contains an image.
<div class="popup-container" tabindex="0">
<div class="popup-wrapper"> //1st popup
<img src="/popup/image-1.jpg" alt="photo">
</div>
<div class="popup-wrapper"> //2nd popup
<img src="/popup/image-2.jpg" alt="photo">
</div>
<div class="popup-wrapper"> //3rd popup
<img src="/popup/image-3.jpg" alt="photo">
</div>
</div>
The 2nd and 3rd popups have a display set to none via css.
.popup-wrapper:nth-child(n+2) {
display: none;
}
My question is how can I show the second popup after closing the first one, and so on from the second popup to third using ESC key.
So far here's my jquery:
$(".popup-container").on("keydown", function(e) {
if(e.which == 27) {
$(".popup-container .popup-wrapper").hide(); //closes the currently shown popup
}
});
You can use next and show since they are siblings.
$(".popup-container").on("keydown", function(e) {
if (e.which == 27) {
$(".popup-container .popup-wrapper:visible")
.hide()
.next()
.show();
}
});
.popup-wrapper:nth-child(n+2) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup-container" tabindex="0">
<div class="popup-wrapper"> //1st popup
<img src="/popup/image-1.jpg" alt="photo">
</div>
<div class="popup-wrapper"> //2nd popup
<img src="/popup/image-2.jpg" alt="photo">
</div>
<div class="popup-wrapper"> //3rd popup
<img src="/popup/image-3.jpg" alt="photo">
</div>
</div>
Related
I'm new to jQuery and I have some issues to stop the scrolling effect. For context, I use this code for hide and show some section on button click.
This is my code:
jQuery(function($) {
$('.rv_button1').click(function(e) {
e.preventDefault();
$("#reveal1").slideToggle();
$('.rv_button1').toggleClass('opened closed');
});
});
I use wordpress with divi theme, the html is not really clear but this part is where my jQuery function is made for (sorry for my English though)
<div class="et_pb_button_module_wrapper et_pb_button_0_wrapper et_pb_button_alignment_center et_pb_module ">
<a class="et_pb_button et_pb_button_0 rv_button et_pb_bg_layout_light opened" href="http://valerieb30.sg-host.com/notre-equipe/#reveal">Québec</a>
</div>
<div id="reveal" class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters2" style="display: block;">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner"><h2>Cuisinistes</h2></div>
</div>
<div class="et_pb_module et_pb_de_mach_archive_loop et_pb_de_mach_archive_loop_0 main-loop loadmore-align- grid-layout-grid main-archive-loop
how to make hover over one div to trigger changes in another div, but not to affect to another div with Jquery. Here is example
I know for this option but It's not working for me
$(function() {
$(".single-holder-image").hover(function() {
$(".read-more-a-black", this).css('color', '#a2d0ba');
}, function() {
// on mouseout, reset the background colour
$(".read-more-a-black", this).css('color', '');
});
});
maybe I need to change html structure
<div class="big-holder">
<div class="single-post-holder">
<a class="" href="#">
<div class="single-holder-image">
<img src="https://i.picsum.photos/id/717/200/300.jpg?hmac=OJYQhMLNcYlN5qz8IR345SJ7t6A0vyHzT_RdMxO4dSc" alt="">
</div>
</a>
<div class="description-holder">
<p class="category name "></p>
<a class="read-more-a-black" href="#"><h5>Title 2</h5></a>
<a class="read-more-a-black-p" href="#">lorem test test test test</a>
<div class="pdf-holder">
<p>Tools:</p>
</div>
</div>
</div>
<div class="single-post-holder">
<a class="" href="#">
<div class="single-holder-image">
<img src="https://i.picsum.photos/id/717/200/300.jpg?hmac=OJYQhMLNcYlN5qz8IR345SJ7t6A0vyHzT_RdMxO4dSc" alt="">
</div>
</a>
<div class="description-holder">
<p class="category name "></p>
<a class="read-more-a-black" href="#"><h5>Title 2</h5></a>
<a class="read-more-a-black-p" href="#">lorem test test test test</a>
<div class="pdf-holder">
<p>Tools:</p>
</div>
</div>
</div>
</div>
Also, will I be able to do the same when the mouse is hover over the title to trigger image and gets a transform: scale?
Use $(this) in the .hover() event handler callback.
This way just the very element where the event occured will be selected.
After that some JQuery DOM traversing with .parents() and .find() and problem solved:
$(document).ready(function() {
$(".single-holder-image").hover(function() {
$(this).parents(".single-post-holder").find(".read-more-a-black").css('color', '#a2d0ba');
}, function() {
// on mouseout, reset the background colour
$(this).parents(".single-post-holder").find(".read-more-a-black").css('color', '');
});
});
Is it possible to make this chili img to a "a href". The function of the pop up is working fine, but there is no "hand", when you hover the picture.
Link to my portfolio
HTML
<img
src="/images/thumbs/image1.jpg"
data-toggle="modal"
data-target="#myModal1"
alt="Trolltunga, Norway"
width="300px"
height="200px"
>
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="//placehold.it/1000x600" class="img-responsive">
</div>
</div>
</div>
</div>
JS
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
img:hover{
cursor: pointer;
}
Add this to your css
You could add this,
img{
cursor:pointer;
}
cursor:pointer indicates that as link. But actually in your codes there is no <a> tag around your image so you can change your cursor property.
Simple use this code in your css.
img:hover{
cursor: pointer;
}
In the following code, how do I adjust the code so that I can display more than 1 picture?
I am new to HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</body>
</html>
My answer would be different depending on your purpose. So what do you need that for? Are you learing javascript? In production enviroment it would be easier and more prespective to use jquery lib.
Anyway. This is pure javascript solution. All you have to do is to distict image elements with selectors and copy event handles (.onclick).
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg1" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg2" src="http://blog.tripwolf.com/de/blog/wp-content/uploads/2015/09/6059394277_55950beb55_b.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the images
var img1 = document.getElementById('myImg1');
var img2 = document.getElementById('myImg2');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
//handle click for myImg1
img1.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
//handle click for myImg2
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
I am making one android app with help of phonegap.I need help how i can hide the image or show the image when i wanted
when my toggleswitch is off then my image which is in third page should hide if my toggleswitch is on then it will show the image
plz help me out how i can do
In HTML5:-
<div data-role="page" id="page1">
<div data-role="content">
<select name="toggleswitch1" id="toggleswitch1" data-theme="" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<a data-role="button" id="button1" data-inline="true" href="#" onclick="clickfn();">Button</a>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p>some text</p><p>some text</p>
<a data-role="button" id="button2" data-inline="true" href="#page3" >Button</a>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<p>some text</p><p>some text</p>
<img src="xyz image" />
<a data-role="button" id="button3" data-inline="true" href="#page1" >Button</a>
</div>
in jquery:-
$(document).unbind('pageinit').bind('pageinit', function () {
clickfn();
});
function clickfn(){
$('#button1').click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$.mobile.changePage("#page2");
}else{
$.mobile.changePage("#page2");
}
});
}
there is property called .hide and .show where you can show or hide the images.
Let us say the id of your image is img, then
$('#button).click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$("#img").hide ();
}else{
$("#img").show ();
}
Add a id in your img
<img id="myimg" src="xyz image" />
And swicth the visibility in code
function clickfn(){
$('#button1').click(function(){
if($("#toggleswitch1 option:selected").val() == 'off'){
$("#myimg").hide ();
}else{
$("#myimg").show ();
}
});
}