I have 13 small pictures and 13 big pictures,if any of the small pictures are clicked it'll show the related big picture, I was just wondering if it was possible to generalize the click function so I don't have to repeat the dame code 13 times, thanks
<div id="press_images">
<img id="s1" class="small" src="images/press/small/1.png" />
<img id="s2" class="small" src="images/press/small/2.png" />
<img id="s3" class="small" src="images/press/small/3.png" />
<img id="s4" class="small" src="images/press/small/4.png" />
.....
<img id="s13" class="small" src="images/press/small/13.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="b1" src="images/press/big/1.jpg" />
......
<img id="b13" src="images/press/big/13.jpg" />
</div>
$("#s1").click(function(){
$('#b1').show();
$('.big').show(300);
return false;
});
so I was wondering if I could change the $("#s1").click(function() so I don't have to repeat it 13 times.
thanks
The following should work :
$(".small").click(function(){
var id_img=$(this).attr('id').replace('s','');
$('.big img').hide();
$('#b'+id_img).show();
$('.big').show(300);
return false;
});
Try this
// For all <img>'s with class `small`
$("img.small").click(function() {
// Get the index from the small image's ID
var index = this.id.substr(1);
// Hide all other big images
$(".big img").hide()
// Show the related big images
$('#b' + index).show();
// Show the big image container
$('.big').show(300);
return false;
});
That's how I'd do it:
<div id="press_images">
<img id="s1" rel="b1" class="small" src="images/press/small/1.png" />
<img id="s2" rel="b2" class="small" src="images/press/small/2.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="b1" class="big" src="images/press/big/1.jpg" />
<img id="b2" class="big" src="images/press/big/2.jpg" />
</div>
$(".small").click(function(){
$( ".big img" ).hide();
$( "#"+ $(this).attr("rel") ).show();
}
Notice that I use "rel" to link the elements. I consider it to be cleaner than assuming that b1 is related to s1. I like CoC, but I'm not sure that in that case it'd be the best idea.
<div id="press_images">
<img id="small1" class="small small-img" src="images/press/small/1.png" />
<img id="small2" class="small small-img" src="images/press/small/2.png" />
<img id="small3" class="small small-img" src="images/press/small/3.png" />
<img id="small4" class="small small-img" src="images/press/small/4.png" />
.....
<img id="small13" class="small small-img" src="images/press/small/13.png" />
</div>
<div class="big">
<a id="close">X</a>
<img id="big1" class="big-img" src="images/press/big/1.jpg" />
......
<img id="big13" class="big-img" src="images/press/big/13.jpg" />
</div>
$(".small-img").click(function(e){
var imgBig = String($(this).attr("id")).replace("small", "big");
e.stopPropagation();
$(".big-img").hide();
$("#" + imgBig ).show();
$(".big").show(300);
});
Put a class in every image. for example:
<img id="s1" class="small clickable-image" src="images/press/small/1.png" />
And then:
$(".clickable-image").click(function(){
$('#b1').show();
$('.big').show(300);
return false;
});
EDIT: then of course, you have to change the line $('#b1').show(); but, it's easy, you just have to get the element ID and build the ID of the bigger image. Just like Justin Johnson does in his answer.
The most flexible option is to use index and eq and get rid of all explicit html helpers, like ID or rel
$('#press_images img').click(function() {
var n = $('#press_images img').index(this);
$(".big img").hide().eq(n).show()
});
Related
Sorry for the miss of information
I have a paragraph like this
<p class="contenucomm12345">test 3 <img src="/monsite/img/emoji/laughing.png" alt=":laughing:" class="emoji_comm"/> <img src="/monsite/img/emoji/smile.png" alt=":smile:" class="emoji_comm" /> <img src="/monsite/img/emoji/satisfied.png" alt=":satisfied:" class="emoji_comm"/> <img src="/monsite/img/emoji/kissing_heart.png" alt=":kissing_heart:" class="emoji_comm"/></p>
And i want
<p class="contenucomm12345">test 3 :laughing: :smile: :satisfied: :kissing_heart: </p>
To do what i want i'm using the function below
$(".contenucomm" + idcom +" img").each(function(index, value){
$(this).replaceWith($(this).attr('alt'));
});
But actually the paragraph, generated by the database is update but in the DOM
I want to put the following in an input and not the DOM.
<p class="contenucomm12345">test 3 :laughing: :smile: :satisfied: :kissing_heart: </p>
How can i do that ?
Do it like this
var a = $($(".contenucomm12345")[0]).text();
$("img").each(function(index, value) {
a = a + $(this).attr('alt');
});
$("#abc").val(a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="contenucomm12345">test 3 <img src="/monsite/img/emoji/laughing.png" alt=":laughing:" class="emoji_comm" /> <img src="/monsite/img/emoji/smile.png" alt=":smile:" class="emoji_comm" /> <img src="/monsite/img/emoji/satisfied.png" alt=":satisfied:" class="emoji_comm" /> <img
src="/monsite/img/emoji/kissing_heart.png" alt=":kissing_heart:" class="emoji_comm" /></p>
<input id="abc" type="text" />
How can I set or change the image using JavaScript or jQuery? The src attribute of img tags with id less than or equal to 3 (that is, img with id as 1, 2, 3) should be changed to (or set to) flower image, then that of img tags with id as 4, 5, 6 be animal image and that of img with id more than 6 (that is, 7, 8) be the default image.
I want to do this using the lesser than and greater than operators (< and >) but I don't want to use a button. I want it to happen automatically when I update the image. Is that possible?
I tried to do this but it is not working.
<div id="image">
<img id="img-1" src="..... "/>
<img id="img-2" src="..... "/>
<img id="img-3" src="..... "/>
<img id="img-4" src="..... "/>
<img id="img-5" src="..... "/>
<img id="img-6" src="..... "/>
<img id="img-7" src="..... "/>
<img id="img-8" src="..... "/>
</div>
Please answer with the full code using the image that make me understand.
It's hard to understand what you're looking for. Consider adding some details in your question. BUT: I made an example of how you at least can change the src or an image.
The easiest way (not the BEST, or most intelligent way) is to change the src attribute on your images. I made a fiddle to show what I mean. https://jsfiddle.net/nbhey2nz/ In short: When you click on the first button, it changes the src on images 1-3. When you click on the second button, it changes the src on images 4-6.
HTML:
<div id="image">
<img id="img-1" src="..... " />
<img id="img-2" src="..... " />
<img id="img-3" src="..... " />
<img id="img-4" src="..... " />
<img id="img-5" src="..... " />
<img id="img-6" src="..... " />
<img id="img-7" src="..... " />
<img id="img-8" src="..... " />
</div>
<div>
<button id="oneToThree">
Change 1-3
</button>
<button id="fourToSix">
Change 4-6
</button>
</div>
jQuery:
$(function(){
$("#oneToThree").click(function(){
$("#img-1").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-2").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-3").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
});
$("#fourToSix").click(function(){
$("#img-4").attr("src","https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-5").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-6").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
});
})
UPDATE!
If I understand your updated question correctly, you want to do this with an operator < and > right?
Well, I updated my fiddle to suit your update: https://jsfiddle.net/nbhey2nz/2/ This time doing it in a JavaScript way, so you get both versions. Notice I changed the image ID to only the integer, not the img-1 way. You could do it this way too, but then you would have to trim the text, and that's kind of not what you were asking about! ;)
HTML:
<div id="image">
<img id="1" src="..... " />
<img id="2" src="..... " />
<img id="3" src="..... " />
<img id="4" src="..... " />
<img id="5" src="..... " />
<img id="6" src="..... " />
</div>
<div>
<button id="oneToThree">
Change images
</button>
</div>
JS:
$(function(){
$("#oneToThree").click(function(){
for(var i = 0; i < document.images.length; i++){
if(document.images.item(i).id <= 3){
document.images.item(i).src = "http://www.small-hydro.com/images/home_btn_small.jpg";
} else if(document.images.item(i).id > 3 && document.images.item(i).id < 6){
document.images.item(i).src = "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif";
} else {
document.images.item(i).src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png";
}
}
});
})
**Just copy and paste this..., Not sure how data is comming. if it is comming through ajax then you need to use setinterval.
Might be it will work, if not please let me know (amitq7000#gmail.com)**
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image change by areraj</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#image img#img-1").attr("src","http://www.top13.net/wp-content/uploads/2014/11/2-small-flowers.jpg");
$("#image img#img-2").attr("src","http://www.top13.net/wp-content/uploads/2014/11/7-small-flowers.jpg");
$("#image img#img-3").attr("src","http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
$("#image img#img-4").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-5").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
$("#image img#img-6").attr("src","http://cochraneanimalclinic.com/wp-content/uploads/2012/07/smallAnimal.jpg");
});
</script>
<style>
img{width:50px; height:50px; display:inline-block; margin-right:5px;}
</style>
</head>
<body>
<div id="image">
<img id="img-1" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-2" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-3" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-4" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-5" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-6" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-7" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
<img id="img-8" src="http://www.cma.rw/sites/default/files/default_images/default_image1.gif"/>
</div>
</body>
</html>
Being that this is my HTML with the four images:
$('div#slideshow').children(function(index){
$(this).width('90%');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
Could you perhaps explain why this is or what I've done wrong with my jQuery command? I'm stumped.
The .children() function does take a parameter, but it's not intended to be a function that operates on the child elements. It's for filtering the child elements.
You could use .children().each() with your code, or you could just do this:
$("#slideshow > img").width("90%");
The library has implicit iteration built in, so when your selector matches multiple elements it will make the changes to each one automatically.
Children is used for filtering, it doesn't do a callback for each element. For that, you need each:
$(function() {
$('div#slideshow').children().each(function(index) {
$(this).width('90%');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
Or just use css:
#slideshow > img {
width: 90%;
}
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
I've wrote this code in order to replace the text regarding the img they are clicking.
I can't understand why my code isn't executing, I looked it over and over again.
I hope someone can find my mistake :(
This is the jQuery code:
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId===3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId===2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId===1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
and this is the HTML:
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
Please help!!!!
Thanks
Problem is in your condition checking
instead of using such that
currentId===3 // checks that currentId is numeric 3
Use
currentId=='3' //changed === to ==, check that currentId is string type 3
And one more thing, after clicking a your page is redirecting, so if you want to prevent this, use preventDeault or put # in your href.
HTML
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId==3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId==2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId==1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
WORKING LINK
http://jsbin.com/heseforaxe/1/edit?html,js,output
var currentId = $(this).attr('id');
All the value of attributes is string ,not number.
so,you can change like this.
currentId==="3";
or
currentId==3;
currentId===3 this should be changed to currentId==3 because the returned id is string
because there is a post back when clicking the link you need to add ref="#" to the a tag
there are missing closing tags on div id='text-1' and the main div
you can find a working copy of this from this url "http://jsfiddle.net/t3L1fkuh/6/" (i have removed the images because 2 of them does not load).
.textbox{
display: none;
}
the above class is added so that it adds the fade in effect on page load
Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/