Navigator Window

[dave7777]

Hello, Can you please help me add the navigator window to your script as can be seen at this page:

http://preview.codecanyon.net/item/uber-zoom-jquery-smooth-zoom-pan/full_screen_preview/9904215?_ga=2.175875874.1887870126.1520159798-1408972354.1519457648

Thanks!) Dave

[dave7777]

Wayne - can you please integrate a minimap script into your code? I am lost as how to do this.

[dave7777]

you think you will be able to integrate the FULl SCREEN AND THE MINIMAP options in the next relsease? These are mission critical functiuonalities...

It will not be hard to update like 1000 pages with the new veriosn of your script (more of a production envirionment)??

And when you plan to release the new version??

[dave7777]

can you please tell me if you will include the FULL SCREEN and MINIMAP in the next release (very much anticipated)?

[waynegm]

Yes it should work with both these plugins as they are. I've already made the changes to the plugin and am in the process of testing and getting all the other things adjusted for a release such as the examples and documentation.

[dave7777]

that is so fantastic to hear - can you maybe send me a working example with both the full screen and the minimap integrated? that would make it absolutely perfect for me!!!

[dave7777]

lets make it the best zoom script ever!)))

[dave7777]

maybe you have a working version with the full screen and the minimap integrated already? - at the very least with the full screen - which would be so good!)

[waynegm]

Download and try this branch. The example in the docs folder called "basic_note_with_plugins.html" shows both fullscreen and minimap controls in action. A couple of things to note:

• The links on the Github Readme page are pointing to old versions of the examples.
• Using the plugin has changed - it must be attached to a div element and the image url is provided as a plugin option - look at the examples to see this. This change was necessary to get the fullscreen control to work.

[dave7777]

SUPERB!!!! LET ME TRY THIS!!!

[dave7777]

wanted to ask shortly - the new way of workign means the script shoudl be updated for each image? not as before - the image was placd inside page html itself..?

[waynegm]

That's correct it now follows the general practice for using Leaflet which is attach to a div element of fixed height and load the image in the script. This is more flexible in that the same html page can be reused like a template to display different images if the image url is passed as a parameter to the page url. Or you can just hard code the image url into the page javascript.

[dave7777]

thank you Wayne - do you think you can show me an exampel when such a parapemter is sent to the htmml page? or it is included in the new release you emtnioned before?

[waynegm]

This function is good for extracting the parameters from a URL.

Lets say your page was loaded with this URL: "http://dummy.com/?image=test_image1" Then you could build the imgURL parameter for imgViewer2 like this:

var imgfolder = "/project/images/"
var imgurl = location.protocol + "//" + location.hostname + imgfolder + GetURLParameter('image') + ".jpg";
var $img = $("#imgv").imgViewer2({imgURL: imgurl, constraint: "height"});

This assumes the image is located on the same host that served the image. If you need to send a full url for the image because it is on a different host then the url would be sent as an encoded string like "http://dummy.com/?image=http%3A%2F%2Fotherdummy.com%2Fproject%2Fimages%2Ftest_image.jpg" and it will have to be decoded before use:

var imgurl = decodeURIComponent(GetURLParameter('image'));
var $img = $("#imgv").imgViewer2({imgURL: imgurl, constraint: "height"});

[dave7777]

Wayne, I tested this code and it works wodnerfully! I just have a couple fo quesitons:

1)how do I make the window show proportionately to the width which is 100% - for now if I do not set min-height to some pixels it just collapses...

2) can I remove the LEAFLET text inside the lower ritgh corner?

3)also this does nto zoom:

$(document).ready( function() {
    var $img = $("#image1").imgViewer2({
       onReady: function() {
            this.setZoom(5).panTo(0.8,0.5);
        }
    });
});

Thank you for your fabilous work! and help! Dave

[waynegm]

I presume you are referring to the Version 2 of the plugin

1. The div element the plugin attaches to must be a fixed height. That's the tradeoff for being able to use the fullscreen control.

2. You can hide the attribution by setting the Leaflet map option attributionControl to false, like this:

   var $img = $("#imgdiv").imgViewer2({
   imgURL: "images/test_image.jpg",
   leafletOptions: {attributionControl: false},
   onReady: function() {
       this.setZoom(5).panTo(0.8,0.5);
    }
   });

3. The code in your post is for the old version of imgViewer2. You need to use code like I give above for Version 2.

[dave7777]

Thank you for your wodnerful help Wayne - I need this to work in a responsive way on multiple types of devices - there is no way the second version can do this? and remain with the full screen control?

[waynegm]

Stuff is generally possible but there are always side effects or unexpected consequences that cause complications especially if your page already has a complex layout. The attached file shows how you can get the responsiveness using css styles when the page has a relatively simple structure. If you can live with this simple page layout then your problem is solved. For a more complex layout I don't know enough css to help. test_basic_note_with_plugins.zip

[dave7777]

thank you - let me check

[shivanit2]

How do I get this plugin to work for an image in a bootstrap modal? Currently,I am trying it this way . $.changeSrc = function() { var $source = $('.focused-on img').attr('src'); $('.full-image-wrapper').prepend('img class="full-image" src="' + $source + '" /'); $(".full-image").imgViewer2({ zoomable: true, dragable: true });

But on doing this ,the zoom in zoom out controls appear on the web page along with the image and not inside the image in the modal. I have a empty div in my HTML markup of the modal window and the image src is fetched from the src of the smaller images (whichever is the current clicked image).

[waynegm]

It should work in that situation. All that is required is that the image be defined before the plugin is attached.

Can you confirm:

• The div in the modal where you want the image has a class of full-image-wrapper
• If you comment out the line with imgViewer2 do you get the image in the modal dialog where you expect

If you can provide a self contained page that demonstartes the issue it will make it easier to determine the problem.

[shivanit2]

Thank you so much for your response ! I have made a codepen for the same https://codepen.io/shivanit2/pen/jKYBwY

Once you click the image and outside the modal window,you will see how the plugin is appearing on the web page with the image instead of inside the modal.I have not been able to figure out why this happens.Please help me out with the same.

[waynegm]

I've resolved why the plugin displays on the web page and not in the modal but I'm now having problems positioning the widget within the modal. May take me a few days to get this working.

[shivanit2]

Hey,Thank you so much for the response! It would be really helpful if you can get this working.I need to implement it in a project.Thanks again!

[waynegm]

I think I have this working. The changes have been included in the Master branch and if a bit more testing sees the changes not breaking anything it will become Release 1.2.0. The attached file contains a modified version of your Codepen script and the modified imgViewer2.js for you to try out. I made some changes to your js code to show you how to use the destroy method to release resources before changing the image. Also you should note the hack in the onReady callback to address the image shaking issues referred to in #10. Shivanit.zip

[shivanit2]

Thank you so much!!!It works perfectly.Thanks again!!