after searching deeper in many questions and in many examples I couldn't get it working. I've trying anything written in any example.
I want to add an image inside a popup marker without using the amazing Leaflet.photo plugin this time.
My problem is that the image goes away from the popup boundaries the first time I open it out. After closing it and open it again, the image fits perfectly within the boundaries.
The same as it happens in this example example
I also tryed to hack the CSS class in following way instead of write custom options as in the example source code.
.leaflet-popup-content img { max-width:234px !important; height:auto; width:auto !important; }
Nothing changed though, the result is the same as in the example shown.
Any suggestion?
Thanks a lot
What may happen is that the image takes some time to download, hence Leaflet does not know the correct size to give to the popup container.
Then on second opening, the image is fetched from browser cache, and Leaflet can properly compute the popup size.
You can try a delayed myPopup._updateLayout() call to have Leaflet re-evaluate the popup container size once your image is downloaded. E.g. attach an onload listener to your image element, with a callback that calls the _updateLayout() method on the popup.
See also leafletjs adding scrollable pop up?
Related
I have found ways of changing the zoom image using links with rel="smallImage:image1.jpg" etc, but I am creating an image at runtime and adding it to the page, so the link will not be there when the page first loads (which it seems like it needs to be).
When I generate the image at runtime, I add a thumbnail to the page and a link to open the thumbnail as the large image. I then want to be able to hover over this image to get the cloud-zoom functionality, but even if I use the code I mentioned above to set the image, I still see the original image as the zoom image.
I was wondering if there was a way I can use JQuery to change the zoom image at the same time I change the source of the image? I was hoping for something as simple as $("image1").CloudZoom.zoomImage = "image2.jpg" but nothing like that seems to work.
Thanks guys
You can place the thumbnail in a div and give the div an onclick event.
<div onclick="DisplayThumbnail(ImagePath)"><img src="ImagePath" /></div>
Call a javascript function and add this:
$('#CloudZoom').attr("href", newimagepath);
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
The cloudzoom uses the anchor tag's href to point to the image to use, so that is the reason we update the href to the new image tag.
I am working with image map i am taken two buttons in my image. in button click one popup(div)displaying .in that div i am taken image one map with areas . i am trying to click (close button and on and off button)) but not responding .after maximize the browser window it is working . could any one solve this problem.and i want make all images responsive i used JQuery Image Map it is working but . when i given div position is absolute.
it is not working. can any one provide solution for this problem
(press tab key for identify image map area's)
Although your question is hard to understand, i will try my best for 50 reps (I am young and needed the money ;)
You are using a JQuery Library from here:
https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js
The readme of it prints in large letters:
"Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize"
So, your close handler doesnt trigger, because the area coords were only calculated by that "rwd" once you resize your browser window, and the readme tells us, that it is designed to do so.
Btw to make your code work:
add $('img[usemap]').rwdImageMaps(); below line 20 in your javascript code.
I'm trying to create a qtip containing a set of icomoon icons. My issue is that the first time the qtip is rendered, it appears displaced from where it's supposed to be.
The content is embedded in my html with display: none and, apparently, the icons are not rendered until after the qtip is created. Therefore, icons are not taken into account for defining the initial width of the qtip and this causes the wrong offset.
When displaying the qtip next times, it doesn't happen anymore as the icons are already rendered and then the width is calculated correctly.
I'm wondering if my approach is simply wrong and there is a more proper solution of defining the content of the tooltip, or hacks are my only option.
Here I have a that depicts my case:
jsFiddle
If you are loading your qTip2 code when the document is ready, try to load with the window, like as follow:
$(window).load(function() {
// Your code here
});
Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/
I have an image on a webpage and when the user hovers over it, another image appears. When then hovering over the appearing image, it flickers.
Anybody any idea why that is?
Tony
UPDATE: The first image does not dissapear when hovering, just another (smaller) image appears over the top in the left top corner. When now moving over that smaller image, then the flicker appears.
The image on the site is part of a gallery, so it's a php variable and gets loaded when a user selects from a list of images. So embedding one into the other is very hard.
Because the browser is fetching the new image. The best solution is to incorporate both images into one, and either purely use CSS to change the background-position on :hover, or ( for IE6 and non-anchor elements ) change the background position with JS.
In IE? IE is notorious for not caching images that are loaded dynamically (either with CSS :hover or due to Javascript events). You can use CSS sprites (basically, using one image file to display both images, and using positioning to show one or the other; tutorial, linked by Mike Robinson), or you can use image preloading:
var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';
Edit: and other browsers will do the same on first load. IE just may continue to do it on every switch.
If I understand you right, you probably replace the src of your image every time the mouseover event is fired. So, even when your image is replaced, your event is fired and the image is replaced with itself, which may cause flickering.
I guess you're probably using IE. This is a bug with the way it implements caching in some versions. You fix it by either configuring your web server to send proper cache headers, or by using CSS sprites. I recommend the latter, as that means less HTTP requests, and the preloading works even without JS.