CODEWITHSUNDEEP
javascripthead.js
user3703618
user3703618

Reputation: 65

Loading a .js file conditionally. How?

First demo is a .js file which is loaded with:
<script src="https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js"></script> https://codepen.io/zuhocuyixu/pen/oqpdWz

The .js adds a nice zooming feature to the image.

Second demo is trying to load the same .js file with head.js. It does not work. https://codepen.io/zuhocuyixu/pen/XEVEwG


Any advice on why this is not working?

Upvotes: 0

Views: 206

Answers (2)

pascalpuetz
pascalpuetz

Reputation: 5418

I recommend looking through the zooming.js docs

You can initialize the zooming on images like this yourself:

head.ready(document, function() {
    head.load('https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js', function() {
         var zooming = new Zooming();
         zooming.listen('.my-img');
    });
});

and change your html to this:

<img 
    class="my-img"
    style='max-width: 100%;'
    draggable="false" ondragstart="return false;"
    src="https://image.ibb.co/bxRTKn/trees_crop.jpg"
    data-original="https://preview.ibb.co/eRYm5S/trees.jpg"
    alt="test"
/>

Upvotes: 0

Keith
Keith

Reputation: 24181

If you look at your dev tools, you will find zooming is actually loading.

Your problem is zooming is loaded after your document html has been loaded, so you will need to tell zooming to re-parse,.

I don't personally use Zooming, but try ->

head.load('https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.js', function () {
  new Zooming();
});

Upvotes: 1

Related Questions