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>
Related
Im trying to make Links inside .newTP clickable, there is something in my Jquery that is not working. Its my first try with Jquery and I am trying to use this and adapt it to my code
<div class="newTablonJS">
<div class="newTP TPB1 newTPActive">
<div class="B1Row1">
Índice
Editar Perfil
</div></div>
<div class="newTP TPB2">
<div class="B2Col1"></div>
<div class="B2Col2"></div>
</div>
<div class="newTP TPB3"></div>
<div class="newTP TPB4"></div>
</div>
And here the Jquery
$(document).on('click', '.newTP', function(e) {
e.preventDefault();
var $el = $(this);
$el.addClass("newTPActive").siblings().removeClass('newTPActive');
$('.newTablonJS').load($el.find('a').attr('href')); });
I'm not sure why this is happening. I'm using two separate modals with two separate scripts that are identifying two separate classes. The first is the "Specials" Modal Window and the second is the "Emergency" Modal Window. Yet when I click the "Specials" links the "Emergency" Modal window opens. When I click the Emergency model window, it opens fine. How can this be fixed so that it works as intended? Thanks in advance for your assistance.
HTML & JQUERY for First Modal Window
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front_03">
<img src="./images/free.png">
</div>
<div class="back_03">
<a class="button-to-click" href="#">
Blah...Blah..
Blah...Blah..<br />
[ CLICK HERE ]
</a>
</div>
</div>
</div>
<div class="popup-container">
<div class="specials_title">BLAH TITLE</div>
<p>Blah...Blah...Blah...</p>
<div class="coupon_container">
<p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
<p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
<p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
<p><div class="fa fa-star checked"></div> Blah.. Blah..</p>
</div>
<a class="popup-close closer" href="#">X</a>
</div>
<script>
$(document).ready(function() {
// config
popup = $('.popup-container');
clickme = $('.button-to-click');
// pop-up
vh = $(window).height();
vw = $(window).width();
bw = popup.width();
bh = popup.height();
clickme.click(function(e) {
e.preventDefault();
popup.fadeOut();
popup.css('left', vw/2 - bw/2);
popup.css('top', vh/2 - bh/2);
popup.fadeIn();
});
//close button
$('.popup-close').click(function() {
$('.popup-container').fadeOut();
});
});
</script>
HTML & JQUERY for Second Modal Window
<div class="co_R_content">
<button type="button" class="click_emergency">
<div class="led-content">CLICK HERE</div>
<div class="led-box">
<div class="led-red"></div>
</div>
</button>
</div>
<div class="popup-container popup-emergency">
<div class="emergency_title">EMERGENCY?</div>
<p>Blah...Blah...Blah...</p>
<div class="entry-content">
<div class="wpforms-container">
<form id="wpforms-form">
<--- WPForms HTML Goes Here --->
</form>
</div> <!-- .wpforms-container -->
</div><!-- .entry-content -->
<a class="popup-close closer closer2" href="#">X</a>
</div>
<script>
$(document).ready(function() {
// config
popup = $('.popup-emergency');
clickme = $('.click_emergency');
// pop-up
vh = $(window).height();
vw = $(window).width();
bw = popup.width();
bh = popup.height();
clickme.click(function(e) {
e.preventDefault();
popup.fadeOut();
popup.css('left', vw/2 - bw/2);
popup.css('top', vh/2 - bh/2);
popup.fadeIn();
});
//close button
$('.popup-close').click(function() {
$('.popup-emergency').fadeOut();
});
});
</script>
Renamed the Variables in the second script from popup & clickme to different names and that did the trick.
FROM:
<script>
$(document).ready(function() {
// config
popup = $('.popup-emergency');
clickme = $('.click_emergency');
// pop-up
vh = $(window).height();
vw = $(window).width();
bw = popup.width();
bh = popup.height();
clickme.click(function(e) {
e.preventDefault();
popup.fadeOut();
popup.css('left', vw/2 - bw/2);
popup.css('top', vh/2 - bh/2);
popup.fadeIn();
});
//close button
$('.popup-close').click(function() {
$('.popup-emergency').fadeOut();
});
});
</script>
TO:
<script>
$(document).ready(function() {
// config
popup2 = $('.popup-emergency');
clickme2 = $('.click_emergency');
// pop-up
vh = $(window).height();
vw = $(window).width();
bw = popup2.width();
bh = popup2.height();
clickme2.click(function(e) {
e.preventDefault();
popup2.fadeOut();
popup2.css('left', vw/2 - bw/2);
popup2.css('top', vh/2 - bh/2);
popup2.fadeIn();
});
//close button
$('.popup-close').click(function() {
$('.popup-emergency').fadeOut();
});
});
</script>
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>
I want to change the text of the Show/hide button or spoiler button while on click by users. In default condition the button text is written as Show and when user click the button the button text should replace with Hide and again if the user click on Hide the button text should change to Show. How to do that,please anyone help me and i will be very thankful.
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/Hide</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
You can use pure JavaScript or Jquery to handle this.
In Pure Javascript:
You can define a method and check the element style property. and also style.display is attribute that you should check.
The below code
solve your problem:
<script>
function toggle(){
var spolier = document.getElementById('spoiler');
if(spolier.style.display == "none"){
spolier.style.display= "block";
}
else {
spolier.style.display = "none";
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
In Jquery:
You should check attr attribute in jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function toggle(){
if ($('#spolier').attr("display") == "none"){
$('#spolier').attr('display', 'block');
} else{
$('#spolier').attr('display', 'none');
}
}
</script>
<button title="Click to Show" type="button" onclick="toggle()">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
Without jquery:
document.querySelector('button').addEventListener('click', toggle)
function toggle(event) {
if (document.getElementById('spoiler').style.display == 'none') {
event.target.innerText = 'Hide'
document.getElementById('spoiler').style.display = ''
} else {
event.target.innerText = 'Show'
document.getElementById('spoiler').style.display = 'none'
}
}
<button title="Click to Show/Hide Content" type="button">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
You can do it like this...
$(function(){
var button = true;
$('button').on('click', function(){
if ($('button').text().indexOf('Show') > -1){
$(this).text('Hide');
} else{
$(this).text('Show');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="Click to Show/Hide Content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show</button>
<div id="spoiler" style="display:none">
ADD YOUR HIDDEN CONTENT HERE
</div>
I recently start to create an application with phonegap and jquery mobile that loads a json an create a elements this is my code.
<script type="text/javascript">
$(document).ready(function(){
$("#boton").click(function(){
$.getJSON("json url",function(data){
var instrucciones = data.Instrucciones;
document.getElementById("titulos").innerHTML = instrucciones;
var acordeonJSON = $('<div data-role="collapsible" id="accordeon"><h3>hi</h3><p>Hello</p></div>');
$.each(data.Items,function(llave,valor){
if(valor.nombreItem !="")
{
$("#accordeon").append(acordeonJSON);
}
});
});//Llave getJSON
});//Llave boton click
});
</script>
This is my Html structure
<div data-role="page" id="home">
<div data-role="header" id="titulo">
<h1 id="titulos"></h1>
</div>
<div data-role="main" class="ui-content" id="div1">
<button id="boton">Presioname</button>
<div id="instrucciones"></div>
<div data-role="collapsible-set" data-theme="c" id="accordeon">
<!--In this part i want to show the content of my json-->
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
My question is why i cant create my elements in jquery, the created elements shows without style.
After appending all the new dom elements within the collapsibleset, call $("#accordeon").collapsibleset( "refresh" ).enhanceWithin();
For example:
$("#boton").click(function(){
var acordeonJSON = $('<div data-role="collapsible" id="accordeon1"><h3>hi</h3><p>Hello</p></div>');
$("#accordeon").append(acordeonJSON).collapsibleset("refresh").enhanceWithin();
});
Here is a DEMO