Alright so I don't know if it can be done, but with the great minds we have here on stackoverflow, I'm confident someone can point me in the right direction.
So I am looking to dynamically update the href tag for an image so when the user chooses a different product option (lets say a different scent) the image link will take the user to that scent's larger image file.
Here's the code so far:
$("#main-image").attr("href", $('.more-views ul li a img[alt="' + $select.find('option:selected')[0].getAttribute('product_id') + '"]').attr('src'));
So that's the easy part. Now the tricky part is shaving down that url that the code gets.
Right now it only gets the smaller version of the image to populate the expanded view.
I need it to get the larger image.
This is the link for the larger image:
http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-64565-a.jpg
And here is the link for the smaller image:
http://staging.greencupboards.com/media/catalog/product/cache/1/image/370x/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-64565-a.jpg
notice how the smaller image has the 370x in the pathname. Is there any way I can treat this as a string and filter this out??! Keep in mind I need to use the .attr code from above.
Let the javascript geniuses to it!
Thanks in advance!
Just add a .replace(/370x\//,'') to .attr('src')
$("#main-image").attr("href",
$('.more-views ul li a img[alt="'
+ $select.find('option:selected')[0].getAttribute('product_id')
+ '"]')
.attr('src')
.replace(/370x\//,'') );
Related
On Qualtrics,
I am trying to pipe and resize one of my image answer to another question.
For example,
Q1: Selected Answer A(a image)
Goal: To Pipe and Resize it to Q2
Q2: ${q://QID2/ChoiceGroup/SelectedChoice} <---how do I resize it?
Is there any way I can do that?
Thank you and appreciate your help :)
Even though you haven't provide any code, I'll make an exception to get you started...
You add JavaScript by clicking on the cog to the left of the question (the second question in your scenario) and select Add JavaScript. Then replace what is there with this:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" img").css({"width":"200px","height":"200px"});
});
Change 200px to your desired width and height. Assuming there is only one image in the question, the code finds the <img> element within the current question <div> and adds width and height styles to it.
I am trying to move an image across the page using a random number that will affect how much the image will move. I got the random number to display so I know the number is generating but my image won't move at all.
Below is the html, javascript, and css that I have used:
http://jsbin.com/bodajisihu/1/edit?html,css,js,output
http://jsbin.com/begafabuya/1/edit?html,css,js,output
Please check this edited JSBin.
I made following changes:
1. You were trying to get left value as car1.style.left, which doesn't work for an image if you have defined left in external style. You needed to make it inline.
2. Now, you can use car1.style.left, but still it returns a string with 'px' appended to it, so I replaced that using .replace("px", ""). But I think parseInt alone could take care of truncating that bit, so this point may not matter
Please note here that car1 is reference to the car element i.e. var car1 = document.getElementById('car1');.
You misspelled the function name. There's an "s" in "moveCars"
Well as the title says.
Right now each signature (on a forum) div got:
<div style='height:Xpx;overflow:scroll'> (X = depends on each signature due to the image heights shifting)
And I want to change the height so I don't have to scroll through each signature, but showing all images directly.
Here is the right part of a signature:
http://puu.sh/4xOW7.jpg (couldn't use the website-image-feature due to not having 10 rep)
And I tested around and managed to make it like this:
http://puu.sh/4xPar.jpg (it's much more further down)
and like this..
http://puu.sh/4xPco.jpg (couldn't post more than 2 links -_-)
I also tried to remove the overflow:scroll, change it, and so on. (also tried removing height: etc)
But I just can't get it to simply remove the scrollbar - making all images show normally. I'd really appreciate help! :)
instead of style="height:250px;overflow: auto;"
you need style="display:inline;"
I'm Trying to build a simple horizontal accordion that will eventually contain more complex data (iframes)... The problem is that I want the size of each accordion tab to be specific to the data it contains, so I'm trying to edit what's already out there (Some tabs are larger than others). When a user hovers over any tab I want to expand that tab to 50% (regardless of its previous size). All that is working fine, but the problem is I can't figure out how to go back to the tabs ORIGINAL width after mouseout. Right now I have the panels shrinking to 10% to illustrate the problem. If you cycle through the page then reload you will see what i mean. Any ideas?
http://www.brianvargo.com/test.html
You can save the original width somewhere. This is one way (with your code):
$(document).ready(function(){
$("ul li").mouseover(function(){
if (this.originalWidth == undefined) this.originalWidth = $(this).width();
$(this).stop().animate({width:'50%'},{queue:false, duration:500,})
});
$("ul li").mouseout(function(){
$(this).stop().animate({width: this.originalWidth},{queue:false, duration:600})
});
});
Untested, and you might choose a different way to save it, but the general idea is there.
What worked for me in a similar situation to yours, was create an attribute with the original size on load of said element, then retrieve it for later use.
Greets,
First - this site is incredible. I've learned a ton of great things here!
I'm using a jquery based slider program to display a sequence of pictures (a series of books). Beneath the slider window I've positioned a "PDF" buttons. I'm trying to sort how to have the button download the file associated with whatever image is currently displayed in the slider box. So if "Picture #3" is showing in the slider window I need the PDF button to be associated with the respective #3 file. I believe I need to change each button's attributes dynamically to match what's showing in the slider window.
You can view the beta site at beta
I suspect I'll need some sort of javascript to snag the click event and feed it to the button's attributes. That's as far as my shaky legs can carry me with this one. Can anyone point me in the right direction? I'm a real noob at this and learning slowly so use small words!
Cheers,
TY
You're on the right track. I think this would probably work, but I'm not used to culling from arrays of jQ elements.
Put the filename into an alt tag in your list items, then use this script:
$('#download-button').click( function() {
var left_pos = $('ul').css('left');
var win_width = $('ul').innerWidth();
left_pos = left_pos * (-1) /* Will convert from negative to positive */
var slide_num = left_pos/win_width;
var slides = $('ul').find('li');
$(this).attr('src', 'path/to' + slides[slide_num].attr('alt'));
});
Also, upon checking the living DOM while playing around with the slider, I noticed that it seemed to jump a bit if you changed directions toward the end of/beginning of the slides. You may want to investigate that