I want multiple images in a window. When I click on a image I want toggle out showing some info. I want this on all my images.
You didn't post the technologies you're using so I assume you are using jQuery and html:
Here is the html example:
<div>
<img class="img" data-imgid="img1" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" width="200px" />
<br/>
<text style="display:none;" id="img1">Image1 ......</text>
<br/><br/>
<img class="img" data-imgid="img2" src="http://www.111ideas.com/wp-content/uploads/2018/01/download-rose-image.jpg" width="200px" />
<br/>
<text style="display:none" id="img2" class="text" hide>Image2 </text>
<br/><br/>
<img class="img" data-imgid="img3" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" width="200px" />
<br/>
<text style="display:none" id="img3" class="text" hide>Finally Image3 :)</text>
</div>
and here is the jQuery code which handle the toggling process.You need to use toggle method based on the id of any text tag in the html code inside onclick function to toggle it:
$(function () {
$('.img').on('click', function () {
var txtId = $(this).attr('data-imgid');
$('#' + txtId).toggle();
});
});
You can see live demo here:
http://jsfiddle.net/gtU56/342/
Related
The following code works to change multiple related images on the same page when a single button is clicked:
<!-- RR buttons -->
<div class="wrapper-9">
<button onclick="changeImage()" id="2" class="box">2</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script>
function changeImage()
{
document.getElementById('theFirstImage').src="RR/images/singles/RR-2.png";
document.getElementById('theSecondImage').src="RR/images/rhythm-2.png";
document.getElementById('theThirdImage').src="RR/images/riff-2.png";
}
</script>
How can I adapt this code to accommodate MANY different buttons, not just one? I have 54 buttons in total. My naming convention ensures that the buttons and the images all correlate by number: that is to say, button "2" corresponds to images "RR-2.png", "rhythm-2.png", and "riff-2.png"; button "46" corresponds to "RR-46.png", "rhythm-46.png", and "riff-46.png". The solution must have to do with excerpting the numeral from the id of the given button, and then inserting it in the source call... but I can't figure out how to do it. I've tried this, to no avail:
<!-- RR buttons -->
<div class="wrapper-9">
<button onclick="changeImage()" id="1" class="box">1</button>
<button onclick="changeImage()" id="2" class="box">2</button>
<button onclick="changeImage()" id="3" class="box">3</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script>
function changeImage()
{
var currentLabel = $(this).closest('.box').find('button').attr("id");
document.getElementById('theFirstImage').src="RR/images/singles/RR-'" + currentLabel + "'.png";
document.getElementById('theSecondImage').src="RR/images/rhythm-'" + currentLabel + "'.png";
document.getElementById('theThirdImage').src="RR/images/riff-'" + currentLabel + "'.png";
}
</script>
Would welcome any insight into what I'm doing wrong!
Ah, solved it! Found the answer here: JavaScript - onClick to get the ID of the clicked button
<!-- RR buttons -->
<div class="wrapper-9">
<button class="box" id="1" onClick="reply_click(this.id)">1</button>
<button class="box" id="2" onClick="reply_click(this.id)">2</button>
<button class="box" id="3" onClick="reply_click(this.id)">3</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script type="text/javascript">
function reply_click(clicked_id)
{
document.getElementById('theFirstImage').src="RR/images/singles/RR-" + clicked_id + ".png";
document.getElementById('theSecondImage').src="RR/images/rhythm-" + clicked_id + ".png";
document.getElementById('theThirdImage').src="RR/images/riff-" + clicked_id + ".png";
}
</script>
1,
2,
Question:When do we change images dynamically ?
Answer: When user asynchronously upload images, such as using ajaxfileupload.js.
when a user upload one image, and want to upload another one.
If he uses Jcrop, the later images are all shown in size of the first image.
even though he uses following jQuery code to change the size of the new image, it`s still in wrong size.
$("#target").attr("width","400");
$("#target").attr("height","250");
Does anyone know how to use Jcrop and show each images in its real size? I mean when the images is dynamically changed.
Thanks a lot!
The souce code is compressed into a zip file, they are all font-end code, so you may open it once it`s unzipped, please open "crop.html"
you may download the zip file (214KB) here:
download
the content of "crop.html" is:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($) {
var jcrop_api;
initJcrop();
$('#coords').on('change', 'input', function(e) {
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1, y1, x2, y2]);
});
function initJcrop() {
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
}, function() {
jcrop_api = this;
});
};
$('#changeToWiderPicture').click(function(e) {
jcrop_api.destroy();
$("#target").attr("src", "img/2.jpg");
$("#target").attr("width", "400");
$("#target").attr("height", "250");
$("#normalPicture").attr("src", "img/2.jpg");
$("#normanPicureIntroduction").html("Original picure:400X250");
$('#changeToWiderPicture').hide();
$('#changeBack').show();
initJcrop();
return false;
});
$('#changeBack').click(function(e) {
jcrop_api.destroy();
$("#target").attr("src", "img/1.jpg");
$("#normalPicture").attr("src", "img/1.jpg");
$("#normanPicureIntroduction").html("Original picure:250X400");
$('#changeBack').hide();
$('#changeToWiderPicture').show();
initJcrop();
return false;
});
});
function showCoords(c) {
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function clearCoords() {
$('#coords input').val('');
};
</script>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/demos.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
</head>
<body>
<table>
<tr>
<td>
<img src="img/1.jpg" id="target" />
<br>Picture with Jcrop attached
</td>
<td width=40%></td>
<td>
<img src="img/1.jpg" id="normalPicture" />
<br>
<span id='normanPicureIntroduction'>Original picure:250X400</span>
</td>
</tr>
</table>
<form id="coords" class="coords">
<div class="inline-labels">
<label>X1
<input type="text" size="4" id="x1" name="x1" />
</label>
<label>Y1
<input type="text" size="4" id="y1" name="y1" />
</label>
<label>X2
<input type="text" size="4" id="x2" name="x2" />
</label>
<label>Y2
<input type="text" size="4" id="y2" name="y2" />
</label>
<label>W
<input type="text" size="4" id="w" name="w" />
</label>
<label>H
<input type="text" size="4" id="h" name="h" />
</label>
</div>
</form>
<div style="padding-top:20px;">
<button id="changeToWiderPicture" class="btn btn-mini">changeToWiderPicture</button>
<button id="changeBack" class="btn btn-mini" style="display:none;">changeBack</button>
</div>
</body>
</html>
I find a solution from another answer on another question:
use -
$('#image').removeAttr('style');
Or simply overwrite the corresponding CSS style, for example -
$("#target").css({"width":"400px" ,"height":"250px"});
please be aware:
CSS style has a higher priority than the attribute, so sometimes, you find your change does not apply, for example -
$("#target").attr("width","400");
$("#target").attr("height","250");
So, for safer, user CSS style instead of an attribute.
I have the below code that is being used in cms page pop up
the problem im having is if you leave email address input field blank and hit the submit (in the case "Get Code" button, you briefly see the red validation message but then hides the form, shows the hidden div.
why or how can I prevent this process, i want it to validate but proceed to show the hidden div content. Below is the code.
<div id="pop-confirm" style="display: none;">
<h1 style="color: #000000; font-weight: bold;">THANKS!</h1>
<p> </p>
<h2>Use code: <strong>extra15</strong><br /> for 15% off your purchase.</h2>
</div>
<form id="newsletter-validate-detail" action="home/send" method="post" onSubmit="new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); return false;">
<div class="block-content">
<h2>ENTER YOUR EMAIL<br /> AND GET</h2>
<div class="form-subscribe-header">
<h1>15% OFF</h1>
<br />
<h1>EVERYTHING!</h1>
</div>
<div class="input-box"><input id="newsletter" class="input-text required-entry validate-email" title="Sign up for our newsletter" type="text" name="email" /></div>
<br />
<div class="actions"><button class="button" title="Get Code" type="submit"><span><span>Get Code</span></span></button></div>
<br />
<p><em>* Promotion ends April 6th</em></p>
</div>
</form>
<script type="text/javascript">// <![CDATA[
var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail');
// ]]></script>
Im very new to ajax so maybe ive done something wrong.
any ideas or suggestion would be greatly appreciated.
Thanks
Try changing your onSubmit to the following:
onSubmit="if(newsletterSubscriberFormDetail.validator.validate()){ new Ajax.Updater({success:'newsletter-validate-detail'}, 'newsletter/subscriber/new', {asynchronous:true, evalScripts:false, onComplete:function(request, json){Element.hide('newsletter-validate-detail');Element.show('pop-confirm');}, onLoading:function(request, json){}, parameters:Form.serialize(this)}); } return false;"`
This wil trigger the validator before submitting the form with AJAX. Works perfect for me :)
My application is web based and developed by MVC3 razor. I wanna show SSRS report in my page. For that I have used iframe tag to show SSRS report and its working fine. After the iframe tag I have put a div and included content in that.
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" />
</div>
<div>© 2012</div>
Problem: I facing problem in div i.e. I'm unable to view values inside the div.
I'm using IE8
An iframe is not a self-closing tag. You should change from <iframe /> to <iframe></iframe>:
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://"></iframe>
</div>
<div>© 2012</div>
iframe's can be self-closed with HTML5, but IE8 doesn't support this.
Your iframe code is missing the closing, you should change your code to
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" ></iframe>
</div>
<div>© 2012</div><div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" ></iframe>
</div>
<div>© 2012</div>
I am implementing an input text with an onkeyup that calls a JavaScript function. I have to put that text over an image, so I was thinking to use innerHtml inside a div that is on the image.
The div:
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
The input:
<input name="formtext1" id="ft1" style="position:absolute;width:571px;left:319px;top:194px;z-index:6" onkeyup="go(this.value)">
The JavaScript:
<script type="text/javascript">
function go(asd){
document.getElementById('uno').innerHTML=asd;
}
</script>
When I write inside input text image will disappear and text appear with background white. Can you help my work out why this happens and what I can do about it?
Setting the innerHTML removes what used to be in the div.
One way to fix this would be to change the html to
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<div id="input"></div>
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
Then use innerhtml on the input div instead.