Develop Reference

JQuery not updating the background-image of a <div> element?

When I hover over a picture on this page, I should be updating the larger div element's src attribute above to be the image url of the image I am currently hovering over.
My breakpoints reach up to the
"$('#image').on('hover', function() {"
line, but won't actually set the url attribute of the div element on the next line. Any pointers?
function upDate(previewPic) {
let newUrl = previewPic.src;
$('#image').on('hover', function() {
$('#image').attr("url", newUrl);
});
};
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="image">
Hover over an image below to display here.
</div>
<img alt="Batter is ready" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg">
<img alt="Perfect Baking" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg">
<img alt="Yummy yummy cup cake" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg">

Remove all inline event handlers
Add mouseenter and leave handlers
Access the css property
Divs do not have URLs
Also I moved the preview to not have to scroll too far down
$(".preview").on("mouseenter",function() {
$("#image").css({"background-image": `url(${this.src})`}); // this.src is the DOM notation for the source of the image you are hovering
})
$(".preview").on("mouseleave",function() {
$("#image").css({"background-image": "" })
})
#image {
height: 500px }
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img alt="Batter is ready" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg" height="50">
<img alt="Perfect Baking" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg" height="50">
<img alt="Yummy yummy cup cake" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg" height="50">
<div id="image">
Hover over an image above to display here.<br/>
</div>

You try to set the url (not a valid attribute) of a div. What you actually want to do is to set the background URL of the div. Check my snippet for a hint into the right direction.
Also dont add another event listener inside the update function.
function upDate(previewPic) {
let newUrl = previewPic.src;
document.getElementById("image").style.backgroundImage = 'url(' + newUrl + ')';
}
function unDo(abc) {
document.getElementById("image").style.backgroundImage = 'url()';
}
#image {
width: 100px;
height: 120px;
background-size: 100px 120px;
}
<div id="image">
Hover over an image below to display here.
</div>
<img alt="Batter is ready" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg">
<img alt="Perfect Baking" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg">
<img alt="Yummy yummy cup cake" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg">

How to load a video in for Woocommerce main product image

I am using Woocommerce and Wordpress.. I implemented a script that changes the main image on the single product page depending on which thumbnail is clicked. I also purchased a premium plugin and tweaked a bit for displaying videos on that single product page.
Currently when the user clicks a thumbnail the main image will change according to the thumbnail that is being clicked. If the thumbnail has a video attached to it then the video will show in place of the main image. My problem is that if someone clicks on another thumbnail after viewing the video I cannot bring that main image back in.
Here is my JS so far:
(function( $ ){
$(document).ready(function(){
$('*[data-videolink=""]').removeAttr('data-videolink');
if($('a[data-videolink]').length > 0){
var video_code = $('.images a[data-videolink]:first').data('videolink');
//$('.images a.woocommerce-main-image').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');
$('.thumbnails .zoom').click(function(e){
e.preventDefault();
var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
$('.images img:first').attr('src',photo_fullsize);
});
$('a[data-videolink]').click(function(e){
e.preventDefault();
video_code = $(this).data('videolink');
//$('.images a[data-videolink]:first').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');
$('.images a.woocommerce-main-image').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');
$('.thumbnails .thumb-img').click(function(e){
e.preventDefault();
var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
$('.images a.woocommerce-main-image').html('<img width="800" height="600" src="http://my-website.com/wp-content/uploads/2013/09/my-main-image-800x600.jpg" class="main-img wp-post-image">');
});
$('.thumbnails .zoom').click(function(e){
e.preventDefault();
var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
//$('.images img:first').attr('src',photo_fullsize);
});
});
};
});
})(jQuery);
This is what the markup looks like on the page:
<div class="images">
<img width="800" height="600" src="http://my-website.com/wp-content/uploads/2013/09/Main-Image-1.jpg" class="main-img wp-post-image" >
<div class="thumbnails">
<img width="100" height="75" src="http://my-website.com/wp-content/uploads/2013/09/Thumb-1.jpg" class="attachment-shop_thumbnail">
<img width="100" height="75" src="Thumb-2.jpg" class="attachment-shop_thumbnail">
<img width="100" height="75" src="http://my-website.com/wp-content/uploads/2013/09/Video-Thumb-3.png" class="attachment-shop_thumbnail" />
</div>
</div>
I am so close! as you can see I have hardcoded a main image to be brought back in after viewing the video and clicking on another thumbnail, this obviously will not work so in place of that what can I do to repopulate that main image with the main image of the thumbnail that is being clicked.

After working with the developer of the original plugin I am using I got it resolved for what I was needing to accomplish -- This is the final piece of code that tied it all together. Thanks for the help guys.
$('.thumbnails a').click(function(e){
e.preventDefault();
video_code = $(this).data('videolink');
var image_src = $(this).attr('href');
if(video_code != null){
$('.images a:first').html('<iframe src ="'+ video_code +'" width="420" height="315" frameborder="no"></iframe>');
}else{
$('.images a:first').html('<img width="800" height="600" class="main-img wp-post-image" src="'+ image_src +'" />');
}
});

Issue with jQuery lightbox plugin/gallery

I have the following gallery set up in jQuery: -
<script type="text/javascript">
$(function () {
$(".image").click(function () {
var image = $(this).attr("rel");
$('#galleryImage').hide();
$('#galleryImage').fadeIn('slow');
$('#galleryImage').html('<img src="' + image + '"/>');
return false;
});
$("#galleryImage").click(function () {
var imageLarge = $(this).attr("rel");
$('#galleryImage').html('<a href="' + imageLarge + '"/>');
$('#galleryImage a').lightBox();
});
});
<div id="galleryImage">
<img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" />
</div>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a>
That takes the rel attribute value when a thumbnail is clicked and inserts it into the galleryImage div allowing the user to select different images via the thumbnails that all display in one place.
Now, what I want to do is apply lightbox to the current image in the #galleryImage div, so that if a user clicks it, an even larger version comes up via the lightbox plugin, but I can't quite get my head around how to do it, this is what I have so far, am I heading in the right direction?

Fixed it, used:
$(".image").click(function() {
var image = $(this).attr("rel");
var imageLarge = $(this).attr("title");
$("#galleryImage img").attr("src",image);
$("#galleryImage a").attr("href", imageLarge);
return false;
}
Using the title value which stores a url to the large image, taken from the currently selected thumbnail and just setting the attribute value in jQuery rather than inserting a bunch of HTML right into the div

javascript code is only working with mozzila firefox?

On my website, I have an image viewer. Every time the user click the left or right button the url of the page will be changed aromatically. The image src uses a specific number from the url of the current page (the only number in the url). Below I have provided the code I am using. The code is working perfectly, but it is only working on mozilla firefox. How can I fix it in order to make it work for all browsers. The problem on the other browsers is that the image do not show up.
<img src="" id="image" >
<script type="text/javascript">
document.getElementById('image').src ="Images/"+location.href.match(/\d+/)+".jpg";
<br/>
document.wrriteln(location.href.match(/\d+/)+".jpg");
</script>
<br/>
<script>
var url = location.href;
function nextImage() {
return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
return((Number(p1) + 1) + p2);
}));
}
function prevImage() {
return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) {
return((Number(p1) - 1) + p2);
}));
}
</script>
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>

What you should do is
<a href="#" id="prevImageControl">
and in the javascript block do
prevImageClick = function()
{
window.location.href = prevImage();
}
var prevImageControl = document.getElementById('prevImageControl');
prevImageControl.addEventListener('click', prevImageClick);
repeat for nextImage()

You need to change these:
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>
To onclick events.
<img border="0" src="Assets/Left.png" />
<img border="0" src="Assets/Right.png"/>
Or better still, put them into functions.

you have a double r in document.wrriteln

How to show/hide big image by clicking on thumbnails?

How to show/hide big image by clicking on thumbnails?
I need like this
Try with JSFiddle here http://jsfiddle.net/jitendravyas/Qhdaz/
Is it possible with CSS only. if not then jQuery solution is OK.
An is it good to use <a href=#"> even it's not opening any new page in same or new tab.
Edit:
I forgot to add. it should work on iPad too

See this example:
No preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript (jQuery)
$(function(){
$(".small-images a").click(function(e){
var href = $(this).attr("href");
$("#big-image img").attr("src", href);
e.preventDefault();
return false;
});
});
Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.
Live example: http://jsfiddle.net/Qhdaz/1/
If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.
With preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/