We Keep Coding

How to do lazy loading image with srcset?

I'm using slick.js to build a carousel. However, even though I change the attribute from src to data-lazy the images still get loaded before I scroll to that image. I suspect that it's because I have srcset tag in in my image. My question is how to prevent browser to load responsive image or how to do lazy-loading for responsive images properly.
This is the sample of my img tag
<img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px">

lazySizes is just working fine. You need to alter your markup into something like this however.
<img data-src="better_me.jpg" data-srcset="better_me2.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200 lazyload" data-sizes="auto" alt="better_me" width="200" height="200" />
Note srcset is changed to data-srcset and data-lazy is changed to data-src. Additionally you must add the class lazyload.
Your sizes attribute didn't made too much sense. Maybe you want to use x descriptors instead? Or simply use sizes="200px"? I don't know. I simply switched it to data-sizes="auto", so it gets automatically calculated for you. (But in that case the image dimension has to be computable before the image is loaded.)
lazySizes indeed loads images before they get in view. This is a big improvement for user experience. A user, who scrolls something into view doesn't want to wait then. A lazyloader that starts downloading an image after it is already in view disrupts the user experience.
One nice thing about lazySizes is that this lazy loader checks whether the browser is currently heavily downloading and decides on this fact, whether it only downloads in view images or to also preload near view images.
But if you don't want this you can control this by setting the lazySizes' expand and expFactor options.

I recommend responsivelyLazy. The implementation is SEO-friendly and does not mess your HTML code. Here is a snippet:
<div class="responsively-lazy" style="padding-bottom:68.44%;">
<img
alt=""
src="images/2500.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w, images/1500.jpg 1500w, images/2000.jpg 2000w"
/>
As you can see the value in the src attribute is not modified.
Read more at http://ivopetkov.com/b/lazy-load-responsive-images/

Usually, to implement lazy loading in HTML, instead of src or srcset attributes, we use data-src or data-srcset so that browser does not load images during speculative parsing. Later on, when Javascript is executed, and the user has scrolled near the image element, we load the actual image and update the src or srcset attribute’s value.
Two very popular lazy loading libraries lazysizes and vanilla-lazyload support responsive images out of the box.
Here are a few examples of using lazysizes.
Lazy loading responsive images in srcset and sizes
<img
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
data-src="medium.jpg"
class="lazyload" />
Using low quality placeholder in lazy loading
<img
src="low-quaity-placeholder.jpg"
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
data-src="medium.jpg"
class="lazyload" />
Lazy loading images in picture element
<picture>
<source
data-srcset="500.jpg"
media="(max-width: 500px)" />
<source
data-srcset="1024.jpg"
media="(max-width: 1024px)" />
<source
data-srcset="1200.jpg" />
<img src="fallback-image.jpg"
data-src="1024.jpg"
class="lazyload"
alt="image with artdirection" />
</picture>
You can learn more about responsive images from this guide - https://imagekit.io/responsive-images

Change font color and URL Dynamically

I am working on website (HTML+PHP).Here is Fiddle of what I have done so far(sharing one for example).
Each image should point to different URLs.
There are few images whose color matches the font color.I want to change font size/color as image changes. Also URL should also change automatically as image changes.
HTML:
<div class="grid">
<figure class="effect-lexi effect-chocolate">
<div id="cf3" class="shadow">
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/22.jpg" alt="Image" class="bottom" />
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="Image" class="top" />
</div>
<figcaption>
<h2>Dark <span>Chocolate Smoothie</span></h2>
<p>Description</p> View more
</figcaption>
</figure>
</div>
Is it possible ? Can anyone help me with it.?
Thanks,

Using CSS3, you might be able to wield the blend mode to accomplish this.
https://css-tricks.com/basics-css-blend-modes/
Also, you would need to use the JavaScript History to change the URL.
https://developer.mozilla.org/en-US/docs/Web/API/History

Probably the simplest solution is to set the font color as an rgba. For example
color:rgba(0,0,0,.5);
As long as the images aren't black, this will adapt nicely to the color of the background. If you don't have any info from the back end, something along these lines is will probably be the way to go.

how to prevent image wrap in responsive mode

how to prevent image wrap in responsive mode. A simple code like below is break to new line in responsive mode.
<img src="image1.jpg" style="float:left;" />
<img src="image2.jpg" style="float:left;" />
<img src="image3.jpg" style="float:left;" />
<img src="image4.jpg" style="float:left;" />
<img src="image5.jpg" style="float:left;" />
please help
Edit:
see this jsbin: http://jsbin.com/AhIwiCA/1/edit

If you want to prevent the images from wrapping, then add a white-space: nowrap; to the parent element and remove the style="float:left; from the images.
http://jsfiddle.net/myajouri/gqxxC/

Bootstrap has a class called inline I believe which may bring the images in line with each other, failing that you may need to trawl through the css to find the relevant css class to prevent this behaviour.

Fancybox not working with images from Twitter API

With Fancybox 2 the example below works flawlessly (left out other code)
<a class="fancybox" href="https://si0.twimg.com/profile_images/2169856486/avatar.jpg" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
but the code below load the image on a separate page
<a class="fancybox" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
The problem seem to be with the image URL the Twitter API supplies which returns a (301) redirect to the actual location of the full image. Is there any way i can get Fancybox to work with images that are supplied using a redirect and that the popup window still has the size of the served image.
Help would be appreciated.
Frank

Since the second code/link doesn't contain an image extension (jpg, gif, png), fancybox cannot determine what type of content is trying to open so you need to tell it.
Either do :
One: Add the type option to your custom script
$(".fancybox").fancybox({
type: "image"
});
Two : add the data-fancybox-type attribute to your link
<a class="fancybox" data-fancybox-type="image" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title"><img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" /></a>

Highslide gallery with two different thumbnails

I'm trying to make a gallery with highslide.
I have two thumbnails, a larger but cropped one listed on the page opening the large image if clicked on, and a smaller one with varying aspect ratio for the thumbstrip.
How do I configure highslide to actually use different images for the thumbstrip?
For example this is a part of the markup:
<a href="highslide/sample-images/picture12.jpg" class="highslide"
title="Caption from the anchor's title attribute"
onclick="return hs.expand(this, config1 )">
<img src="highslide/sample-images/picture12.thumb.jpg" alt=""/>
</a>
The link is pointing to the large picture, the img is showing the cropped thumbnail.
Can I override a function for example to use two thumbnails like:
<a href="highslide/sample-images/picture12.jpg" class="highslide"
title="Caption from the anchor's title attribute"
onclick="return hs.expand(this, config1 )">
<img class="thumb" src="highslide/sample-images/picture12.thumb.jpg" alt=""/>
<img class="strip" src="highslide/sample-images/picture12.strip.jpg" style="display: none" alt="" />
</a>

Actually I found a solution to this some time ago:
On the highslide api reference http://highslide.com/ref/ there is a function stripItemFormatter. The parameter of the function is the element you expand (the element).
the string returned by this function will be parsed as html, and used as an item of the thumbstrip.
If you check this example: http://highslide.com/ref/hs.stripItemFormatter you can see how it's done.