I have an eCommerce page of products with some small thumbnails below. When I mouse moused over a thumbnail I want to swap the different variation image into the product image. I have this working using the code below but I assume this isn't the best way to do this? Can anyone suggest a better way for me to grab the "product-image" src= tag and update it? The number of parent / child calls I've used to set the right data seems excessive.
Thanks in advance. Tim
<script>
$(document).ready(function(){
$('.nSwatchProduct').hover(function(){
var newSource = $(this).attr('data-variation-image');
$(this).parent('._itmspec_listitm').parent('.nColourSwatch').parent('.categoryswatch').parent('.caption').parent('.thumbnail').children('.thumbnail-image').children('.product-image').attr('src', newSource);
});
});
</script>
web page hierarchy
<div class="thumbnail">
<a href="https://www.website.com/productpage" class="thumbnail-image">
<img src="/assets/thumbL/imagename.jpg" itemprop="image" class="product-image" alt="" rel="itm">
</a>
<div class="caption">
<div class="nColourList categoryswatch">
<a class="_itmspec_lnk thumbnail nColourSwatch" href="https://www.website.com/productpage" ref="1_83" data-toggle="tooltip" data-placement="top" title="" data-original-title="Blue">
<div class="_itmspec_listitm" ref="1_83">
<img class="nSwatchProduct" src="/assets/thumb/variationimage.jpg" alt="Blue" data-variation-image="/assets/thumb/variationimage.jpg">
</div>
</a>
Use .closest to select nearest common parent and then .find that element you need
$(this).closest('.thumbnail').find('.thumbnail-image .product-image')
Related
I have a Bootstrap website with a navigation like this:
<a href="">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/messages-grey.svg">
</div>
<div class="panel-footer panel-categories-footer-small">
Messages
</div>
</div>
</a>
And the icons are all named like this:
<img src="img/messages-grey.svg">
<img src="img/messages-blue.svg">
<img src="img/settings-grey.svg">
<img src="img/settings-blue.svg">
I already got the 'Messages' part to change colors with CSS, but I also need to make the .SVG icons to change from "-grey" to "-blue" whenever someone hovers over the linked DIV. How would I achieve this? Possibly with CSS and if not, jQuery?
It is not possible to change the src attribute of an img using CSS.
You can use Javascript, however. Doing it with jQuery makes it quite simple:
$("a").hover(function () {
$(this).data("originalImage", $(this).attr("src"));
$(this).find("img:first").attr("src", "path-to-new-img.svg");
}, function () {
var original = $(this).data("originalImage");
$(this).find("img:first").attr("src", original);
});
try using
a:hover{
background-image:url(img/messages-blue.svg);
}
in the css.
I just can't get the quoting to work properly in my template. I know I could generate the link in the client side JavaScript, but I think it would make sense to do it directly in the template.
My code looks like below and my target is to make the div clickable:
<div class="thumbnail" onclick="window.location = {{pathFor 'viewSailboatAd' _id}}">
This renders:
<div class="thumbnail" onclick="window.location = /ads/sailboat/yXbWorY3295RdevnQ">
That won't work as we need quoting around the value like this:
<div class="thumbnail" onclick="window.location = '/ads/sailboat/yXbWorY3295RdevnQ'">
How could I achieve this?
That works :
<div class="thumbnail" onclick="window.location = '{{pathFor "viewSailboatAd" _id}}'">
Why not making the thumbnail an anchor in the first place ?
Bootstrap .thumbnail class plays nicely when used as a link.
<a class="thumbnail" href="{{pathFor "viewSailboatAd" _id}}">
{{! ...}}
</a>
I have tried this several different ways but can't seem to figure out how to toggle the span's class from "die2" to "die3" along with the toggle of the div's display style from 'block' to 'none'. Anybody have any solutions? (Basically when the page loads, this ad will be displayed and when you click the red x (die2) the add disappears and the red x should change to a green check box (die3). Here's the code that does work for the div toggle that I'm using.
<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<span id="myspan" class="die2"><!-- --></span>
Thanks guys, I think I got it going now ... I added another class to the stylsheet and then just reused what JKing answered. I could get the divHide to work but it would just add the class and remove the class. So I decided to just add a divShow and use the same code for the span. Thanks guys!
<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
Since the above did not work in IE I Used Sven's code and got it to work, we were missing the # when we called the #mydiv...
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>
I'll work with this code for a bit and see if it will suite my needs. :) Thanks guys!
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
That's it
You don't need jQuery, though you might like it. All you need to do is use an element's classList object.
You can do a lot of cool things with classList:
el.classList.add("myClassName") //adds class (does nothing if el already has that class)
el.classList.remove("myClassName") //removes class (does nothing if el doesn't have that class)
el.classList.toggle("myClassName") //toggles class
el.classList.contains("myClassName") //returns true if el has that class, false if not.
Here's a modified version of your code, as an example of what you could do - though I'm not sure it's exactly what you want to do, but it should point you in the right direction.
<div id="mydiv" class="divHide">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
(I'm toggling a class on the div as well to show/hide it, instead of your if/else checking of the style attribute.)
I sugest jQuery:
mydiv.toggle() or mydiv.removeClass("die2").addClass("die3")
My CMS's lightbox-style photo gallery outputs code like below. I've provided code for two thumbnails.
The parameter values for "m" and "s" will always be "150" and "true." I'd like to change that to m=250 and s=false.
I'm new to JavaScript and jQuery. If you have a suggestion, please help me out with where to put the code on the page. Thank you.
<div class="thumbTight MainContent">
<div class="thumbContents">
<a href="/PhotoGallery/banana.jpg" rel="lightbox[2065379]" title="Banana">
<img src="/ResizeImage.aspx?img=/PhotoGallery/banana.jpg&m=150&s=true" alt="Banana" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
<div class="thumbTight">
<div class="thumbContents">
<a href="/PhotoGallery/cantaloupe.jpg" rel="lightbox[2065379]" title="Cantaloupe">
<img src="/ResizeImage.aspx?img=/PhotoGallery/cantaloupe.jpg&m=150&s=true" alt="Cantaloupe" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
In your document ready handler, use each to iterate over the thumbnails (images inside divs with the thumbContents class) and assign the src attribute to the original src attribute with the required substitutions.
$(function() {
$('.thumbContents img').each( function() {
var $img = $(this);
$img.attr('src', $img.attr('src').replace(/m=150/,'m=250').replace(/s=true/,'s=false') );
});
});
You can run this jQuery after the page has loaded. The images will start loading with the different URL, your code will run and change the image URLs and then the new one will load and display. There is nothing you can do client-side to prevent the initial display unless you actually use CSS such that they images are initially hidden and only made visible AFTER you've set the desired URL.
$(".thumbTight img").each(function() {
this.src = this.src.replace(/m=150/, "m=250").replace(/s=true/, "s=false");
});
You can see a demo here: http://jsfiddle.net/jfriend00/UdnFE/.
I used javascript for loading a picture on my website depending on which "small" photos in ul you clicked...
I had something like that :
<script type="text/javascript">
function viewImage(src, legende) {
document.getElementById("imageBig").src = "images/photos/"+src;
document.getElementById("legend").innerHTML = legende;
}
</script>
and in html simply :
things like that :
<ul id="ulPhotos">
<li>
<a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')">
<img src="images/photos/carre-09.jpg" alt="" />
</a>
<a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - <em>La Périchole</em> à l’Opéra Comique')">
<img src="images/photos/carre-03.jpg" alt="" />
</a>
</li>
<li>
<a href="#centre" onclick="javascript:viewImage('12.png','Récital à Carnac, septembre 2008')">
<img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac Ré" />
</a>
<a href="#centre" onclick="javascript:viewImage('01.jpg','')">
<img src="images/photos/carre-01.jpg" alt="" />
</a>
</li>
</ul>
so you see, I could, depending on which small photos in the unordered list you clicked, load some particular photos, by passing the src string in argument to my viewImage function...
but I decided to use Jquery to get some fade-in effect. But I can't find a way to pass an argument that would tell my JQuery function which photo to load depending on where I clicked...
stuck here :
$(document).ready(function(){
$('#ulPhotos').click(function() {
var newSrc = $('#imageBig').attr("src", "images/photos/11.jpg");
});
});
I don't want the 11.jpg to be hardcoded, I need to pass it through argument when I click on a special li element in my ul element of id #ulPhotos...
I hope I'm clear enough sorry !
karim79 gives a correct solution, but doesn't actually explain your problem.
You are attaching the click handler to the list itself instead of directly to the images. When an attached jQuery behavior callback fires, this is the element that was clicked, which you want to be the a links surrounding the images. In your current case this will be the list itself.
You don't necessarily need to add a class to the thumbnails. $('#ulPhotos a') will get you to them just as easily. I do agree with the suggestion to use a data- attribute on the clickable to know which large image you want to show.
In addition, if you are going to add secondary click behavior to the a elements, you probably want to prevent the default behavior from happening, so something like:
$('#ulPhotos a').click(function (event) {
$('#imageBig').attr('src', $(this).attr('data-big-image'));
event.preventDefault();
});
A pretty straightforward solution would be to assign a common (thumb or whatever) class to all the small images, and store the filename of the bigger images within their rel attributes, e.g.:
<img src="something.jpg" rel="something_big.jpg" class="thumb"/>
<img src="somethingElse.jpg" rel="somethingElse_big.jpg" class="thumb"/>
<img id="bigImage" src="something_big.jpg"/>
$(".thumb").click(function() {
$("#bigImage").attr('src', $(this).attr("rel"));
});
data is another storage mechanism you might consider.
It is also quite common (and simple) to follow a particular convention and 'assemble' the filename of the larger image based on the src of the clicked smaller one, for example:
<img src="something.jpg" class="thumb"/>
<img src="somethingElse.jpg" class="thumb"/>
<img id="bigImage" src="big_something.jpg"/>
$(".thumb").click(function() {
$("#bigImage").attr('src', 'big_' + $(this).attr("src"));
});
That assumes that all of your full-sized images are prefixed with 'big_', so it's a simple matter of appending 'big_' to the src of the clicked thumbnail.
thanks to both of you, my website is working, I give the final code for beginners like me who could have the same needs...
here's the function :
<script type="text/javascript">
$(document).ready(function(){
$('#ulPhotos a').click(function() {
var newSrc= $(this).find('img').attr('src').split("/");
bigPictureName = 'big'+newSrc[2];
$('#imageBig').attr("src", "images/photos/"+bigPictureName).hide();
$('#imageBig').fadeIn('fast');
var alt = $(this).find('img').attr('alt');
$('#legend').html(alt);
});
});
</script>
here are the html elements :
<ul id="ulPhotos">
<li><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/>
<img src="images/photos/03.jpg" title="Manuelita, La Périchole à l’Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l’Opéra Comique" /></li>
<li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>
I used the alt attribute to append the legends so as to be able to add some html tags like <em > because the title appears when you hover your mouse on the thumbnails, and I didn't want people to see strange tags for them...
sometimes, it's a little slow when you click very fast it can stay on the previous photo for a little while at first try, maybe because I didn't use a CDN to put the minified version of jquery (I read such an advice), don't know, I'm truly a beginner, but it's nothing serious anyway...
by the way, the page is here..http://www.marion-baglan.net/photos.htm