1

I am running a gallery using fancybox on page load. I am trying to apply lazyload using jquery lazyload for the images in the fancybox.

But somehow its not working. I changed the jquery.fancybox.js from.

image    : '<img class="fancybox-image" src="{href}" alt="" />',

to

image    : '<img class="fancybox-image lazy" data-src="{href}" src="" alt="" />',

So the resulted html will be like the following.

<img class="fancy-image lazy" data-src="file.jpg" src alt/>

I am applying the lazy load like below.

<script>
$(document).ready(function(){
   $("img").lazy();
});
</script>

and also i tried delay.

<script>
$(document).ready(function(){
   $("img").lazy({
    delay: 5000
   });
});
</script>

I have also searched through google but i cant able to find anything related to this. Please help me.

Mahendran Sakkarai
  • 8,381
  • 6
  • 44
  • 66
  • Did you get any error with fire bug on page load ? please explain what is your question . – Farshad Aug 12 '14 at 12:12
  • Hello @Farshad , i didnt get any error. I am trying to apply lazyload for the images showing in the fancybox. I am loading the fancybox while opening the page itself using triggering the fancybox. I have lot of images in the queue. So while loading the page it will load entire images. so it take too much of time to load all images. Actually whenever i load the page, only the first image in the gallery should load. And in thumbnail of fancybox need to show all images in the gallery. I am trying this with lazyload and is there any alternative for this process. Thank you. – Mahendran Sakkarai Aug 12 '14 at 12:27
  • I think this link useful for you [link](http://www.resrc.it/demos/modal) – Farshad Aug 12 '14 at 12:41
  • Hello @Farshad , I check the link. There the fancybox is loading after the image click. i am not loading the fancybox after page load. I am loading the fancybox straightaway when i open a page. i need to reduce the time taken to load the page by loading only the first image and all the thumbnails, whenever i load that particular page in fancybox. – Mahendran Sakkarai Aug 12 '14 at 12:52
  • put your try (code) in jsfiddle if you want . I'l check it. – Farshad Aug 12 '14 at 13:05
  • Here is the [fiddle](http://jsfiddle.net/wcjaj2xw/) – Mahendran Sakkarai Aug 12 '14 at 13:27
  • take a look at this [demo](http://www.hishamomran.com/zahabia3/gallery.html) – Farshad Aug 12 '14 at 17:49

2 Answers2

1

Respecting to your comments my Solution is :

Source Code

Demo

 $(function() {
          $("img").lazyload();
      });


    $('.nav_wrap_start').delay(300).animate({top:'0px'},1500).queue(function(next) { $(this).attr('class','nav_wrap'); next(); });
    $('.welcome_wrap').delay(2100).fadeIn(500);
    $('.nav_wrapleft').delay(300).fadeIn(700);

    // fancybox settings
    $("a.fancyboxnumber").fancybox({
        'titlePosition'     : 'outside',
        'overlayColor'      : '#000',
        'overlayOpacity'    : 0.9
    });
Farshad
  • 1,465
  • 1
  • 9
  • 12
-1

1. Summary

Use this construction:

<a data-fancybox="gallery" href="{{Link to your image}}"><img class="KiraNotLazy" data-src="{{Link to your image}}" alt="{{Your image description}}"></a>
  • {{Link to your image}} — it must be same for href and alt attributes, if you use same image for thumbnail

2. Demonstration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery Lazy + FancyBox</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-lazy@1.7.10/jquery.lazy.min.js" defer></script>
    <script src="KiraScript.js" defer></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.css" />
    <link rel="stylesheet" href="KiraStyle.css" />
</head>
<body>
    <a data-fancybox="gallery" href="https://i.imgur.com/15Nghv2.jpg"><img class="KiraNotLazy" data-src="https://i.imgur.com/15Nghv2.jpg" alt="Kira in winter 1"></a>
    <a data-fancybox="gallery" href="https://i.imgur.com/5Iotirp.jpg"><img class="KiraNotLazy" data-src="https://i.imgur.com/5Iotirp.jpg" alt="Kira in winter 2"></a>
    <a data-fancybox="gallery" href="https://i.imgur.com/d6mDu6F.jpg"><img class="KiraNotLazy" data-src="https://i.imgur.com/d6mDu6F.jpg" alt="Kira in winter 3"></a>
    <a data-fancybox="gallery" href="https://i.imgur.com/fh3wGvs.jpg"><img class="KiraNotLazy" data-src="https://i.imgur.com/fh3wGvs.jpg" alt="Kira in winter 4"></a>
</body>
</html>

body {
  background-color: aliceblue
}
img {
  display: block;
  margin: 0 0 100rem;
  max-width: 100%
}

// [INFO] JQuery Lazy basic usage:
// http://jquery.eisbehr.de/lazy/
$(function() {
    $('.KiraNotLazy').Lazy();
});

// [INFO] FancyBox3 options:
// https://fancyapps.com/fancybox/3/docs/#options
$('[data-fancybox="gallery"]').fancybox({
    buttons: [
        "zoom",
        "share",
        "slideShow",
        "fullScreen",
        "download",
        "thumbs",
        "close"
    ],
});

KiraJQueryLazyFancyBox--ezgif_minified

3. Disclaimer

This is solution for:

  • JQuery 3.3.1
  • JQuery Lazy 1.7.10
  • FancyBox 3.5.6

In the future versions my answer may not work.

4. Syntactic sugar

If you have same images as thumbnails, you can use this script, modified for FancyBox 3. You can remove a wrapper around img.

Саша Черных
  • 2,561
  • 4
  • 25
  • 71