I am working on a simple gallery for my site.
Demo: http://jsfiddle.net/fdr6y6y7/
I have a large image that changes when you click a thumbnail underneath it.
However, I have an issue. Each 'large' image has a link to itself in a new window, however you can see that the original main image link never changes.
For example, if I click the 2nd thumbnail image the hyperlink inside the largeimg div should really change to http://placehold.it/250x250.
Can I use jQuery to do this?
$('#thumb_scroll a').click(function(event){
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largelink').attr("href", $(this).attr("rel"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<img src="http://placehold.it/200x200" />
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<img src="http://placehold.it/100x100" />
</li>
<li>
<img src="http://placehold.it/100x100" />
</li>
</ul>
</div>
</div>
</div>
Thanks to the Anon SO user for this: http://jsfiddle.net/fdr6y6y7/1/
$('#thumb_scroll a').click(function(event) {
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largeimg a').attr("href", $(this).attr("href"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<a href="http://placehold.it/300x300" target="_blank" class="main">
<img src="http://placehold.it/200x200" />
</a>
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<a href="http://placehold.it/300x300" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
<li>
<a href="http://placehold.it/250x250" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
</ul>
</div>
</div>
</div>
Related
I'm trying to move the #whatsOnLink to below the "Get a Quote" button across the site using jQuery and I'm having trouble on the jQuery side of things. If I remove the additional part of .button from the target then it will move fine but I need it to go inside the holding div.
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"] div .button'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
Any help is appreciated.
Regards,
Kieran
Use this
$(this).closest('div[class^="grid_3"]').find('div .button')
Instead of
$(this).closest('div[class^="grid_3"] div .button')
$(document).ready(function() {
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"]').find('div .button'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
You could use .next()
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
// OR
// $(this).appendTo($(this).parent());
});
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
I am creating a dropdown menu for my website, and am using jQuery slideToggle. I have it working for each individual category on the navigation (When navparent is clicked, navhild toggles), however when clicking other parents, the previous child div remains open. I would like to close other divs when the parent is clicked.
jQuery(document).ready(function($) {
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
<div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/source.png" alt="Parent" title="Parent" />
<br />Parent
</a>
<div class="navchild">
<ul> <li>Child</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/source.png" alt="Parent" title="Parent" />
<br /> Parent
</a>
<div class="navchild">
<ul> <li>Child</li></ul>
</div>
</div>
</div>
You can simply hide all child divs when clicking on parent.
$('.navmobile').find('.navchild').hide()
You can add a line to just hide all .navchild elements, then the one for the click will open.
jQuery(document).ready(function($) {
$('.navchild').hide();
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
</div>
Or you can just set the .navchild element to be hidden by default in the CSS. (Generally a more efficient way to handle this).
jQuery(document).ready(function($) {
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
});
});
.navchild { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
</div>
.navchild { display: none; }
when you click on a parentnode, have the jQuery hide all of the children nodes except the one toggled:
jQuery(document).ready(function($) {
$('.navchild').slideToggle(90);
$('.navparent a').click(function(e) {
e.preventDefault();
// determine what div is open
var $this = $(this).parent().find('div');
// hide all divs except this one
$(".navparent div").not($this).hide();
// toggle selected div
$this.slideToggle(90);
});
});
working fiddle: http://jsfiddle.net/iamthejonsmith/BGSyS/900/
I am trying to make a prev and a next button that changes de "src" attribute of the "lightbox" img. Basically when you click on a thumbnail, jquery script gets its src and places on the lightbox, now i need to make a button that let me get the src of the next and prev img ( or thumbnail ?)..
$(document).ready(function(){
$(".thumbnail").click(function(){
var address= $(this).attr("src");
$("#popup").fadeIn("slow");
$("#lightbox").attr("src",address);
$(".footer").fadeToggle("fast");
});
$("#close").click(function(){
$("#popup").fadeOut("slow",function(){
$(".footer").fadeToggle("fast");
});
});
$("#next").click(function(){
$("#lightbox").removeAttr("src");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="popupslide">
<div id="popup">
<div id="center">
<img id="lightbox" src="" >
<img id="close" src="fotos/fotoscidade/close.png">
<img id="next" src="fotos/fotoscidade/close.png">
<img id="prev" src="fotos/fotoscidade/close.png">
</div>
</div>
</div>
<div>
<ul class="sidebside">
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/asa.jpg" class="thumbnail" width="200">
</li>
<li>
<img src="fotos/fotoscidade/MorroDC/Balne%C3%A1rio%20Morro%20dos%20Conventos.jpg" class="thumbnail" width="200">
</li>
</ul>
</div>
Give your imgs attribute called img_no with values like 0,1,2,3,4 etc. Use that value, parseInt it and get src based on it.
Refer this link to understand what I mean. Infinite carousel doesnt work
this is my html code for aove fig.....
when i click on delete (id ="outdelete") total div (id="rightoutimage") should be deleted.......................
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
this is my scripting code........
<script>
function deleteImg(id11) {
id11 = document.getElementById("outdelete");
$('#+id11').remove();
}
</script>
$('#outdelete').click(function(){
$("#rightoutputimgae").remove();
});
Here's another option for you, which you can see a working example here:
http://jsfiddle.net/TdLSy/
$(document).ready(function(){
$("li a").click(function(event){
event.preventDefault();
$(this).find('img').remove();
});
});
Along with your original HTML code:
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete" /></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
Change:
<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)">
to:
<li id="outdelete"><a href="#" onClick="deleteImg(this)">
and your JS code:
<script>
function deleteImg(self) {
$(self).parents('#rightoutputimgae').get(0).remove();
}
</script>
Try this:
document.getElementById("rightoutimage").addEventListener("click", function(e) {
if(e.target.id === "outdelete") {
var parent = e.target.parentNode;
parent.parentNode.removeChild(parent);
}
});
You can do this:
$('#outdelete > a').click(function(){
$(this).closest('#rightoutputimgae').remove();
});
When the user hovers over the link with the class "thumb" the closest link with the class "title" should have the class "media-link-hover" applied to it. How can this be done?
I tried closest() and also this but nothing seems to be working:
$('a.thumb').hover(function() {
$(this)
.prevAll('.block')
.find('a.title')
.addClass('media-link-hover');
}, function() {
$(this)
.prevAll('.block')
.find('a.title')
.removeClass('media-link-hover');
});
HTML:
<article class="block">
<div class="inner-left">
<a class="thumb" title="" href="">
<img width="198" height="111" alt="" src="" />
<span class="media-overlay">video</span>
</a>
</div>
<div class="inner-right">
<a class="title" title="" href="">Hello</a>
<div class="description">
<p>Hi there</p>
<a class="teaser" href="">Hola</a>
</div>
<div class="media-stats">
<span class="finder">Found by <strong>Me</strong> 1 month ago</span>
</div>
</div>
</article>
Works with closest('.block')
http://jsfiddle.net/yBwSN/
Try with parents() and also you can reduce the code by using toggleClass().
Demo http://jsfiddle.net/elclanrs/Ce8fu/
$('a.thumb').hover(function() {
$(this)
.parents('.block')
.find('a.title')
.toggleClass('media-link-hover');
});