Placing the code inside the iframe

[dave7777]

Hello Do you think the image can shrink with the iframe inside which it is placed? Love your code but need to make it work inside the responsive iframe Cheers!

[waynegm]

I don't think this will work with the plugin as is. You would need to create a new plugin derived from imgViewer2 and add an event handler that responds to an iframe resize event. Within the handler the code would be identical to what's in the imgViewer2 $(window).resize handler.

[dave7777]

thank you for your fast reply - see you changed the exampel picture- looks great... so the only way to do this is to add your code to a page natively?

also when I drag the image insto the desktop view - where do I set the IENRTIA? it woudl be lovely for the image to slide a little after beign dragged

[dave7777]

I am getting this error when placing the code inside another page:

Uncaught TypeError: $.widget is not a function

    at imgViewer2.js:27
    at imgViewer2.js:501
LHZGj5a:6291 Uncaught TypeError: Cannot read property 'imgViewer2' of undefined
    at LHZGj5a:6291
    at LHZGj5a:6329

and the image is not zooming....can you please help?

[dave7777]

I am tryign to integrate your scrip with this template:

http://demo.interface.club/limitless/layout_3/LTR/default/index.html

[dave7777]

I was able to integrate your script into a webapoge but now I get this error and the typehead search bar not workign - do you think there can be a conflcit between these two scrips ?

Uncaught TypeError: $.typeahead is not a function
    at imageview-native.html:6094
app.js:630 Uncaught TypeError: $(...).popover is not a function
    at HTMLDocument.<anonymous> (app.js:630)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.I (jquery.min.js:2)

The link to the typeahead script:

https://github.com/running-coder/jquery-typeahead

[waynegm]

Can't really be sure without seeing the code that is generating the error - are you sure there isn't an error in the definition of $.typeahead in your script. This doesn't look like it has anything to do with imgViewer2

[dave7777]

thank you - when I remove all script declarattions from the HEAD the typehead starst to work...

<link href="p7ttm/p7TTM11.css" rel="stylesheet" type="text/css" media="all">

        <link rel="stylesheet" href="chartsimageview/docs/lib/leaflet.css" />
        <script type="text/javascript" src="chartsimageview/docs/lib/leaflet.js"></script>
        <script type="text/javascript" src="chartsimageview/docs/lib/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="chartsimageview/docs/lib/jquery-ui.min.js"></script>
        <script type="text/javascript" src="chartsimageview/docs/lib/imgViewer2.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />

.can you please take a look at this

[dave7777]

I have attached the archive with the both scripts combined

there are a workign and not working versions inside the EXAMPLES folder

https://sendit.cloud/njhv58dnhic7

Can you please take a look (it should not take more that a couple of minutes)? I need your script to wprk with this typehead script...

[dave7777]

can you please take a look? maybe I can pay you to try to reconcile these two scripts?

[waynegm]

You are loading 2 versions of jQuery in the head of "test not working.html". You need to remove the second version at line 19 and it will work.

[dave7777]

yes - exactly just noticed this thank you so much for this fabulous code!!!

[dave7777]

Waynegm (what is your name?) I had a short question if you have a single variable which controls the inertia of the desktop and mobile versions and how it is called?

Also - do you think I can have a nvigator window similar to this script?

https://codecanyon.net/item/uber-zoom-jquery-smooth-zoom-pan/9904215

[dave7777]

also wanted to ask if there is way to add the button to make the image full-screen on mobile phones??

[dave7777]

also - if this is not that too much to ask - do you think it is possible to place the hovering logo image next to the plus and minis bottom - on the other side of the image?

[waynegm]

My name is Wayne. Leaflet supports a number of animation settings but I have disabled these in the L.map options around line 101 in imgViewer2.js. If you want to try these suggest you fork the github repo and enable them. Check out the Leaflet documentation for the settings available. For the overview display have a look at these plugins. For the full screen button have a look at these plugins. I haven't tried them but expect they should all work. Just extend the imgViewer2 plugin as shown in Example 7 or you could activate instances of the plugins in a custom onReady callback.

[dave7777]

Thank you Wayne - is there a way to enabel the animations in the script which you provided? nwo that it all is workign I am afraid to make major changes:)

[dave7777]

I changed this to true inertia: true,

it still does not slide - is this the correct parameter?

[dave7777]

it works!!!

added these lines!!

inertia: true, inertiaDeceleration:3000,

[dave7777]

quick quesiton - I tried to change the border of the image container with this code and the border does nto show:

    background: #1F1F1F;
    outline: #B8393B;
    border:thick;
    border-color: aqua;

[dave7777]

also please help me - does the leaflet allow to have the navigation box?

[waynegm]

1. For the navigation box/overview display have a look at these plugins.
2. For showing a logo have a look at the Leaflet EasyButton plugin.
3. To customise the appearance attach the style properties to the leaflet-container class (put the below at the end of your head section or in a site.css file and link to it). It also looks to me like your style specifications are incomplete:

   <style>
   .leaflet-container { border: 5px solid aqua; outline: 5px solid #B8393B;}
   </style>

   Note that the background style is unnecessary as the image covers the background completely.