I have a series of thumbnails. One by default has an active class of "p7_current" applied to it which puts a border around this image. The others all have a class of "p7_inactive" which removes the border.
I'd like it if in this group of 6 thumbs that the last one clicked has the class of "p7_current" and the rest are assigned "p7_inactive".
How could I go about this with jquery?
<div class="p7_postcard_thumbs">
<img src="images/p7_pc1.jpg" class="p7_current" />
<img src="images/p7_pc2.jpg" class="p7_inactive" />
<img src="images/p7_pc3.jpg" class="p7_inactive" />
<img src="images/p7_pc4.jpg" class="p7_inactive" />
<img src="images/p7_pc5.jpg" class="p7_inactive" />
<img src="images/p7_pc6.jpg" class="p7_inactive" />
</div>
$('.p7_postcard_thumbs img').click(function(e){
$('.p7_postcard_thumbs img').removeClass('p7_current p7_inactive').not(this).addClass('p7_inactive');
$(this).addClass('p7_current');
});
jsFiddle example
You can actually reduce it to one line although perhaps it isn't as easy to read:
$('.p7_postcard_thumbs img').click(function(e){
$(this).addClass('p7_current').closest('div').find('img').not(this).attr('class', 'p7_inactive');
});
JSFiddle: http://jsfiddle.net/lucuma/4jSCM/3/
Related
Hey i am working on a css slider it is working fine without js only with css but i want to make a js script for navigation buttons for slider i mean i want to make a js script that can slide the content left or right by clicking on left or right button and it has to make a loop i mean if you click button once then it has to slide content left or right by 100% each time and max width is 1000% of the content which i want to slide can anyone please help me for this
<div class="slider-10">
<div class="slider-box" style="width: 1000%">
<img src="img/image-1.jpg" />
<img src="img/image-2.jpg" />
<img src="img/image-3.jpg" />
<img src="img/image-4.jpg" />
<img src="img/image-5.jpg" />
<img src="img/image-6.jpg" />
<img src="img/image-7.jpg" />
<img src="img/image-8.jpg" />
<img src="img/image-9.jpg" />
<img src="img/image-10.jpg" />
</div>
</div>
And i want to slide this section:
<div class="slider-box" style="width: 1000%">
<img src="img/image-1.jpg" />
<img src="img/image-2.jpg" />
<img src="img/image-3.jpg" />
<img src="img/image-4.jpg" />
<img src="img/image-5.jpg" />
<img src="img/image-6.jpg" />
<img src="img/image-7.jpg" />
<img src="img/image-8.jpg" />
<img src="img/image-9.jpg" />
<img src="img/image-10.jpg" />
</div>
Please help me
You can set any img in a div element means 1 div for every imgtag then declare a function in js and call it with onclick event for EX: click right button sends 1 to function and left one -1.
then yo can add class for every div that should show.
I am currently trying to make a script that will hide/show divs right under inputs. At the moment, I am targeting every single inputs and every single divs by ID (which I find might be a bit heavy, instead of targeting divs relatively to the input position).
So right now it looks a bit like this :
jQuery(document).ready(function(){
jQuery('#inputbutton1').on('click', function(event) {
jQuery('#divtarget1').toggle('show');
});
});
jQuery(document).ready(function(){
jQuery('#inputbutton2').on('click', function(event) {
jQuery('#divtarget2').toggle('show');
});
});
and so on. Is there a way I could take, say, the event.target and from there, reach the div relative to that input button. So that way I would have a single script with variable values rather than 30 scripts with unique ID selectors. Each input button/div combos come as follows (They are scattered through the page, but always come in pairs.) :
<div class="hideshowdiv"><input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'></div>
<div id="divtarget1" class="spellimg"><img src="image.jpg" alt="Image"></div>
Thanks in advance.
Use following code. It's flexible and will work for every new image you add.
$(document).ready(function() {
$('input').on('click', function(event) {
$(this).parent().next().toggle('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
<div class="hideshowdiv">
<input class="hideshowbtn" type='button' id='inputbutton1' value='Hide/Show Image'>
</div>
<div id="divtarget1" class="spellimg">
<img src="image.jpg" alt="Image">
</div>
If div .element has specific class .block / <div class="element block"> then delete html node .element img
HTML:
<div class="element">
<img src="images/picture.jpg" alt="" />
<img src="images/picture.jpg" alt="" />
</div>
Want to delete img, how to do this by Jquery?
Why not something simple like that?
$('.element.block').find('img').remove();
$('.element.block img').remove ()
This removes only images which are in blocks with the both classes
I have this code in my page:
$('img[title!=""]').each(function() {
It currently selects the all img's in the website, but I only want to get the images that are within a certain div called 'layout' where title is not null, how would I do this?
Assuming layout is ID of div
Use
$('img[title!=""]', '#layout').each(function() {
OR
$('#layout img[title!=""]').each(function() {
$("#myDiv").find('img[title!=""]').each(function() {
// ...
});
That would catch all <img> in #myDiv:
<div id="myDiv">
<img src=" ... />
<img src=" ... />
<img src=" ... />
</div>
jsFiddle demo
First, you might need to allow for those elements that don't have a title attribute at all. This condition would be covered by:
$('#layout img[title]').each(function() {
However, then you must check if the title attribute is present but blank:
if ( this.title != "" )
Putting it together:
HTML:
<div id="layout">
<img title="kitten01" src="http://placekitten.com/150/150" />
<img src="http://placekitten.com/151/151" />
<img title="" src="http://placekitten.com/152/152" />
<img title="kitten04" src="http://placekitten.com/153/153" />
</div>
<div id="otherdiv">
<img title="dog01" src="http://placedog.com/150/150" />
<img title="dog02" src="http://placedog.com/150/150" />
<img title="dog03" src="http://placedog.com/150/150" />
</div>
jQuery/js:
$('#layout img[title]').each(function() {
if ( this.title != "" )
alert( this.title );
});
Note: you may already know this, but fwiw the above example assumes that your div is called layout because it has an ID attribute named layout. If the div is of class="layout" then:
$('.layout img[title]').each(function() {
how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image
If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.
Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});