jQuery product viewer - javascript

Im trying to build a simple, lightweight product viewer using jquery.
I have a default image that I want to dissapear when a thumb is clicked and replace the image in 'X' div.
Ive attached a fiddle if anybody can explain how this is done?
http://jsfiddle.net/BYuxR/3/


http://jsfiddle.net/sabri/gQyC4/
Try this
$('.thumbs a').click(function(e){
e.preventDefault();
$('.product-image').html( $('<img>').attr('src',$(this).attr('href')));
});


Answer.
http://jsfiddle.net/BYuxR/6/

Related

Add photo in Slide show?

Hello guys like to add a new slide in a slideshow , but I can not add thumbnails , I'm only managing to add the main image
Example: http://goo.gl/rwqRJd
Please someone help me?

Well, I don't know the plugin but I did a little workaround... Also, you have a nicer way to create elements in jQuery as you will see with $(<div/>, options);
Here's your updated fiddle

Showing description in lightbox using Jquery plugin blueimp gallery

So what i want to do is add a description to the lightbox gallery.
I am using jquery plugin blueimp image gallery and also the bootstrap image gallery plugin over the top. I've searched everywhere but there were only a few posts about it other than what is mentioned within the instructions of the documentation, so figured i'd ask.
i'm sure that's probably whats causing the problem but first i'd like to know if there is a way to add a description preferably underneath the image, it can be under the title too though.
this is the furthest i have got with it using the code below from the blueimp documentation and an additional extra i found from another user demonstrated in the jsfiddle.
blueimp.Gallery(
document.getElementById('links'), {
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
});
http://jsfiddle.net/2B3bN/37/
this shows how it looks on my webpage, i did manage to implement this but you will however notice that it only works for the first image.
Surely this can be amended with some js? I'm pretty new to js i can read and amend basic js but i'm guessing the same way they change the title can be used to change the description?
Thanks for all the help guys!

In case you still need this:
$('#blueimp-gallery').on('slide', function (event, index, slide) {
$(this).children('.description')
.text($('#links a').eq(index).data('description'));
});

Take href of an anchor in a div and apply it to an image?

I have a div with an image and a link in it.
Is it possible that on page load, I can somehow find the href of the link and apply that the anchor tag of the image?
I know this may seem like a strange request, i jsut asking if it can be done, and if so, how?
http://jsfiddle.net/fFgwb/
Sorry everyone, I want the image to be wrapped in an anchor tag, witht he same href as the 'continue reading' link

Still making assumptions about positioning of the elements, but the basics are below. Its very simple to do this in pure JS without needing to include jQuery.
Live Demo
var link = document.querySelectorAll('.card-prod a');
link[0].href = link[1].href;

try this:
$(document).ready(function(){
$("#theDiv").find("a").attr("href", $('img').attr('src'));
});
updated:
$(document).ready(function(){
$("#anchor").attr("href", $('#continue').attr('href'));
});
http://jsfiddle.net/fFgwb/5/
so, you should add classes like .divs to divs and other classes to anchor links:
$(document).ready(function(){
$(".divs").each(function(){
$(this).find("a").hasClass("anchor").attr("href", $(this).find("a").hasClass("continue").attr('href'))
});
});

Write a function inside jquery .html()

I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...

you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works

http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.

JQuery-how to get a imagelink as pop up on mouse hover on a div tag

I have a tag on a html page on which I am trying to write a jquery function in order to pop open a image link on "hover" which when clicked on, takes me to another web page. I need to set the "navigateURL" property on the link on "hover".
I am fairly new to jquery.
Can somebody please suggest me a good approach for this?
I highly appreciate any help you can offer.
Thanks

$('#tagdiv').hover(function(e)
{
$('#hoverdiv').html('<div><image src="'+$(this).html()+'"/></div>');
});
where 'hoverdiv' is id of any div which is on that page and 'tagdiv' is id of where you want to hover event.
like:
<div id='tagdiv'>image.jpg</div>
<div id='hoverdiv'> </div>

Categories