We Keep Coding

Change img in slick dots

Customer want change slick dots images. So I created block with his downloaded images and hide them. After that I get img src and create
new Image()
with src from hidden block. Add img to li, create new array with objects with key for 'hover' and 'default' image.
$('.slick-dots li').each(function(i, e) {
var img = new Image();
img.src = _images[i].normal;
_images - array with objects. Each value have one object. Each object have default and hover key with different src
So i have smth like this
[ {'normal': 'src', 'hover': 'src'}, {'normal': 'src', 'hover':
'src'}, {'normal': 'src', 'hover': 'src'} ]
img.slickData = _images[i];
img.setHover = function(e) {
this.src = this.slickData.hover;
};
img.removeHover = function(e) {
this.src = this.slickData.normal;
};
$(this).on('mouseenter', function(e) {
$('img' ,this).attr('src', img.slickData.hover)
});
$(this).on('mouseleave', function(e) {
$('img' ,this).attr('src', img.slickData.normal)
});
$(e).append(img);
});
}
Hover work. But problem is that I don't know the rigth way how to catch swipe and clickable events and change image to 'hover src'
P.S. Sorry for my English :)

#CBroe, thank you. This is almost what I want. But only swipe works as it's should be - immediately changes src to default img in previous and change src to hover in active dot.
After works after animation is complete and then change src. Before do the same but in reverse.
I do something else, but swipe is the most incomprehensible question:
$('.slick-prev, .slick-next').on('click', function(){
changeIcons() // when click next\prev
});
$('.services_slick').on('swipe', function(){
changeIcons() // when swipe
});
changeIcons() // when page is loaded
function changeIcons(){
var dotIndex = $('li.slick-active').index();
$('.slick-dots li img').each(function(i){
$(this).attr('src', _images[i].normal)
$(this).parent().removeClass('services_icons_hover')
});
$('li.slick-active img').attr('src', _images[dotIndex].hover)
$('li.slick-active').addClass('services_icons_hover');
}

Replace img src with js jquery

I have a newsfeed in my CMS that pulls preview images as well as teaser text for the feed. The images are all thumbnails # 75x75px. I wanted to have the preview images much larger, but cannot scale an image that small.
I'm wondering what JS I need to run to replace all the URL's to the original image src.
Have:
Need to change them all to the below - which is just replacing 'thumb' with 'large':
This needs to apply to a whole css class; as it is a newsfeed & there will be new articles
Here's where I'm at:
function replaceImgSrc(img,imgTwo) {
var arr=[img,imgTwo];
for(i=0;i<arr.length;i++)
arr[i].each(
function(i,e) {
theImg=$(this),
theImg.attr("src",
function(i,e) {
return e.replace("_thumb","_large")
}
)
}
)
}

If the newsfeed is wrapped in a class, try this way.
function replaceImg($class) {
$class.find("img").each(function(k, el) {
var newSrc = $(el).attr("src").replace("_thumb", "_large");
$(el).attr("src", newSrc);
});
}
replaceImg($("#newsfeed"));
And in your HTML, wrap the newsfeed code inside an identifiable DIV.
<div id="newsfeed"> {{place newsfeed code in here}} </div>

Try this fiddle jsfiddle.net/bharatsing/wkh6da93/
This will find all images in page and change its src with large image.
$(document).ready(function(){
$("#btnLarge").click(function(){
$("img").each(function(){
var src=$(this).attr("src");
src=src.replace("_thumb","_large");
var src=$(this).attr("src",src);
});
});
});

If the assumption is that you have all img elements in an array var imgArray, then you can iterate thru them and update the src attribute like this:
imgArray.forEach(enlargeImageSrc);
function enlargeImageSrc (image) {
image.src = image.src.replace('_thumb', '_large');
}

Try this hovering over the button will make the images with class="show" bigger, as soon as you remove the mouse they are small again.
$("button").mouseenter(function (){
var srcI = $(".show").attr("src");
srcI = srcI.replace("thumb","large");
$(".show").attr("src",srcI);
});
$("button").mouseleave(function (){
var srcI = $(".show").attr("src");
srcI = srcI.replace("large","thumb");
$(".show").attr("src",srcI);
});
button{
display:block;
}
img.show{
max-width:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Click me</button>
<img class="show" src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png"/>
</div>

I make a code for you where I take two variables one for large image URL and one for small image URL. I create a function on click on change image button your image url change to big image and it show you big image and then you again click on that button it change big image to small image. You can also see the live demo of this here https://jsfiddle.net/Arsh_kalsi01/3s1uudhe/2/
$(document).ready(function(){
var big_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_large.png";
var small_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png";
$(document).on("click",".Changeimagetolarge",function(){
var obj = $(this);
obj.removeClass('Changeimagetolarge');
obj.addClass('Changeimagetosmall');
obj.next("img").attr('src',big_image);
});
$(document).on("click",".Changeimagetosmall",function(){
var obj2 = $(this);
obj2.removeClass('Changeimagetosmall');
obj2.addClass('Changeimagetolarge');
obj2.next("img").attr('src',small_image);
});
});
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<div>
<button class="Changeimagetolarge">
Change Image
</button>
<img src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png">
</div>

100% fully show image before fading in

I have 2 images. My intention is when the image finished display, and finished fade in, I will load some function.
My question
How do I make sure my image is fully loaded and displayed on screen?
I ask because sometimes, when the image is still loading (like only half the image is showing), it will fade in somehow, I need make sure it shows the full image before fading in.
FIDDLE
var temp = "";
var displaythumbnailbox = $(".area1");
var lis = $(".area1 img");
//hide the image , in order to use fadein
lis.hide();
lis.each(function(i) {
$(this).fadeIn('fast', function() {
console.log("finish load all image");
if (i == lis.length - 1) {
//getting last image display.
alert("finish display the last image");
//going to put some function here.
}
});
});

You can substitute css display:none for .hide(), .ready() , .promise()
css
.area1 img {
display:none;
}
javascript
$(document).ready(function() {
var temp = "";
var displaythumbnailbox = $(".area1");
var lis = $(".area1 img") //.hide()
.each(function(i) {
$(this).fadeIn("fast", function() {
console.log("finish load all image");
});
});
lis.promise().then(function() {
alert("finish display the last image");
})
})
jsfiddle https://jsfiddle.net/88ft369z/3/
If you want to display images in sequence you can substitute i multiplied by a duration, e.g., i * 250 at .each() for "fast" jsfiddle https://jsfiddle.net/88ft369z/4/

You can check if the element is loaded using .load().
var lis = $(".area1 img");
lis.load(function(){
lis.hide();
lis.each(function(i) {
$(this).fadeIn('fast', function(){
console.log("finish load all image");
if(i == lis.length -1)
{
//getting last image display.
alert("finish display the last image");
//going to put some function here.
}
});
});

jQuery fade image in and out on click or load

I was given this fantastic script, from #Phil, that helped get my out of a stump and it works perfectly in my application. But because I'm so new to javascript I can't figure out how to make the images animate opacity in and animate opacity out.
// jQuery syntactic sugar to run after page loads
$(function () {
// attach a click event to anything with a data-file attribute
$("[data-file]").on('click', function (evt) {
// figure out what was clicked
var clickedEl = $(evt.target);
// get the data-file attribute
var dataFile = clickedEl.attr('data-file');
var container = $(".bom_container");
// empty the div
container.empty();
// create image element
var img = $("<img/>").attr("src", dataFile)
// add it to the container
container.append(img);
// or update the background image
// container.css('background-image','url('+ dataFile +')');
});
});
When the links are clicked on, these images open in a container. But again, I would like the images to ease in instead of just BOOM APPEAR. Is there somewhere I can add animate opacity to this script or do I have to add an whole new script?

jQuery has great .fadeIn() and .fadeOut() methods just for this.
// jQuery syntactic sugar to run after page loads
$(function () {
// attach a click event to anything with a data-file attribute
$("[data-file]").on('click', function (evt) {
// figure out what was clicked
var clickedEl = $(evt.target);
// get the data-file attribute
var dataFile = clickedEl.attr('data-file');
var container = $(".bom_container");
// empty the div
container.empty();
// create image element
var img = $("<img/>").attr("src", dataFile).css("display","none") // <----- see here
// add it to the container
container.append(img);
img.fadeIn(/*duration in ms*/) // <----- see here
// or update the background image
// container.css('background-image','url('+ dataFile +')');
});
});

Before changing the image src you can fade out the image, change the source, then fade in the new image.
$('#img_selector').fadeOut('fast', function() {
$(this).attr("src", "newsource.jpg")
.fadeIn("fast");
});

Preloading Image Bug in IE6-8

Page in question: http://phwsinc.com/our-work/one-rincon-hill.asp
In IE6-8, when you click the left-most thumbnail in the gallery, the image never loads. If you click the thumbnail a second time, then it will load. I'm using jQuery, and here's my code that's powering the gallery:
$(document).ready(function() {
// PROJECT PHOTO GALLERY
var thumbs = $('.thumbs li a');
var photoWrapper = $('div.photoWrapper');
if (thumbs.length) {
thumbs.click( function(){
photoWrapper.addClass('loading');
var img_src = $(this).attr('href');
// The two lines below are what cause the bug in IE. They make the gallery run much faster in other browsers, though.
var new_img = new Image();
new_img.src = img_src;
var photo = $('#photo');
photo.fadeOut('slow', function() {
photo.attr('src', img_src);
photo.load(function() {
photoWrapper.removeClass('loading');
photo.fadeIn('slow');
});
});
return false;
});
}
});
A coworker told me that he's always had problems with the js Image() object, and advised me to just append an <img /> element inside of a div set to display:none;, but that's a little messy for my tastes--I liked using the Image() object, it kept things nice and clean, no unnecessary added HTML markup.
Any help would be appreciated. It still works without the image preloading, so if all else fails I'll just wrap the preloading in an if !($.browser.msie){ } and call it a day.

I see you've fixed this already, but I wanted to see if I could get the pre-loading to work in IE as well.
try changing this
photo.fadeOut('slow', function() {
photo.attr('src', img_src);
photo.load(function() {
photoWrapper.removeClass('loading');
photo.fadeIn('slow');
});
});
to this
photo.fadeOut('slow', function() {
photo.attr('src', img_src);
if (photo[0].complete){
photoWrapper.removeClass('loading');
photo.fadeIn('slow');
} else {
photo.load(function() {
photoWrapper.removeClass('loading');
photo.fadeIn('slow');
});
}
});