I am trying to create a link beetween an external menu (img) / a marker / a div (content) - not using bindpopup.
I managed to create a link to open the bindpopup.
This is my marker :
var markers = [];
var marker1 = L.marker([43.55,7.02],{title:"marker_1", icon: ballicon}).addTo(map).bindPopup('Villes de CANNES');
markers.push(marker1);
This my link :
<div class="item">
<a id="marker_1" href="#">
<table class="cannes" align="center" cellpadding="0" cellspacing="0" height="150" styleborder="0" width="250"><tbody><tr><td valign="top" background="cannes-250x150.jpg" height="150"><div id="numcannes">1</div> </td></tr><tr><td class="titlecannes" height="25">Cannes</td></tr></tbody></table></a>
</div>
But instead of open the bindpopup I would like to zoom on the marker and open the popup content in a div.
I can do it by clicking on the marker :
var marker1 = L.marker([45,1],{title:"marker_1", icon: ballicon, clickable: true,
name: 'Cannes Place', type: 'City'}).on('click', onClick).addTo(map);function onClick(e) { $('#content').html("<p><strong>Name:</strong> "+this.options.name+"</p><p><strong>Type:</strong> "+this.options.type+"</p>")};
... but I do not know how to open the content in div by clicking on my img.
Thank you in advance,
If you don't want your content to be utilizing in Leaflet's Popup functionality, why involve Popup at all? Simple attach the properties you need to the options hash of Leaflet's Marker, and go from there. Then I would assume you could bind to your image(although I would use an actual IMG tag instead of the deprecated background attribute on a TD) with
$("#marker_1").click(function(){
map.setView(marker_1.getLatLng(),10);
//set content of #content here
})
Related
I am trying to add an editable textarea to a marker in MapLibreGL:
el.classList.add("marker");
el.innerHTML = `
<img src="/marker.svg" alt="" />
<textarea>click to edit</textarea>
`;
const marker = new maplibregl.Marker(el)
.setLngLat([longitude, latitude])
.addTo(map);
The marker shows but I cannot type in the textarea...I can't click or inspect it either. I tried .marker { z-index: 100000; } in css but that didn't do anything.
The main problem I'm looking at right now is the next/previous buttons are not working as expected after featherlightGallery() has been called more than once - The first click on the next button always shows the first image while the previous button always shows the 2nd to last image.
GitHub
The idea is to show the first 4 thumbnails from a gallery on a page.
When one of these thumbnails is clicked, the (hidden) gallery opens via featherlight, a click is triggered on the related image in the gallery, and the gallery behind the image is closed. This leaves the viewer with the image they clicked and the next/previous buttons. (ignore the lack of styling!)
Every time these thumbnails are clicked, the next/previous buttons work as expected, displaying adjacent images in the gallery.
The first 4 images from the gallery shown on the page: (# is substituted for actual numbers. The data-click attr is used in JS to trigger a click on the related gallery image)
<div id="intro-gallery">
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
<a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
</div>
Clicking this link opens the featherlight div without triggering any clicks or hiding the gallery (with JS).
<p><a class="link" href="#main-gallery-container">Gallery</a></p>
The first time the link is clicked, the gallery is shown and the user clicks a thumbnail, the next/previous buttons work as expected. Since the gallery is hidden after user clicks a thumbnail, they need to click the Gallery button again to see all the thumbs - at this point, after clicking another thumbnail, the next button always shows the first image and the previous button shows the 2nd to last image. Seems like the current image is set to the last image in this case.
Inside this #main-gallery div are 12 .gallery-item divs (1 shown for brevity).
<div id="main-gallery" data-featherlight-gallery data-featherlight-filter=".mgi">
<div class="gallery-item">
<a class="main" id="gi-#" href="#mgi-#">
<div class="thumb-holder" style="background-image: url('img/{$x}.jpg');"></div>
</a>
<div class="mgi-wrapper">
<div id="mgi-#" class="mgi">
<div class="mgi-image" style="background-image: url('img/#.jpg');">
</div>
<div class="mgi-text">
<p>Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
JS
"use strict";
(function ($) {
$(function () {
$('a.link').click(function (e) {
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
}); // Add link to view gallery, bind click.
$.featherlightGallery.prototype.afterOpen = function () {
var link = $('<span class="single-gallery-link"><a class="link" href="#main-gallery-container">View Gallery Images</a></span>');
$('.featherlight.single .featherlight-content').prepend(link);
$(link).click(function () {
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
});
};
$('a.intro').click(function (e) {
e.preventDefault();
initGallery(); // get ID from data-att of initial thumbnail
var id = $(this).data('click'); // Get same thumb in gallery and trigger a click
var thumb = document.getElementById(id);
$(thumb).click();
});
$('#link').click(function (e) {
e.preventDefault();
initGallery();
});
var switchToGallery = function switchToGallery(e) {
// prevent triggered click
e.preventDefault();
$.featherlight.close();
$.featherlightGallery.close();
initGallery();
};
var initGallery = function initGallery() {
$.featherlight('#main-gallery', {
variant: 'onclick',
afterOpen: function afterOpen() {
$('a.main').featherlightGallery({
targetAttr: 'href',
variant: 'single',
beforeOpen: function beforeOpen() {
$.featherlight.close();
}
});
}
});
};
});
//https://stackoverflow.com/a/52611202/774793
//$.featherlightGallery($(".column"), {$currentTarget: $('the first item, maybe this in your case?')});
})(jQuery);
//# sourceMappingURL=index.js.map
EDIT: I don't like posting URLs with a limited lifespan here but for the sake of solving the problem - temporary example
The library is confused, $.featherlightGallery.current().$currentTarget[0] seems to be a detached copy and not part of $.featherlightGallery.current().slides() so navigation is lost.
I'm not too sure what is going on and don't have the time to delve into it further.
I would try with persist: true. Also looks like you are constantly re-initing the gallery, you should bind it once.
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
I'm using a jquery menu UI. When the select function is triggered, a class is added to the selected item that highlights it with a color while unhighlighting a previous selection. Within that code I have a button that I want to alert the text value of the selection once the button is clicked. The problem isn't that I can't alert the value, it's that if I select something that is 3rd or 4th on the list, alert boxes will show for the previous third or second line items as well as the one that has been clicked. What code can I use to restrict the alert value down to only the selection that is highlighted with the class that adds color.
<script>
$(function(){
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
// add the css class as well as get the text value of the selection
var selection = ui.item.addClass('selected').text();
$("button").click(function(){
alert(selection);
}); //closes click()
}// closes select function
});// closes menu
});
</script>
<ul class="menu" id="menu">
<li><img src="" alt="" /><h2>Academic: Art Studies</h2></li>
<li><img src="" alt="" /><h2>Academic: Literature</h2></li>
<li><img src="" alt="" /><h2>Academic: Social Sciences</h2></li>
<li><img src="" alt="" /><h2>Academic: Physical/Natural Sciences</h2></li>
</ul>
You are binding click event to the button multiple times on every select. Remove the button click binding and put it outside the menu function. See fiddle
$(function () {
var selection ;
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
// add the css class as well as get the text value of the selection
selection = ui.item.addClass('selected').text();
} // closes select function
}); // closes menu
$("button").on('click', function () {
alert(selection);
}); //closes click()
});
I have a gallery of 5 thumbnails and one larger image. I have jqZoom tied to the large image so when you mouse over it, you can see a zoomed in version.
I'm having trouble when a user clicks an alternate thumbnail. I can get the larger image to change, but the zoomed in image remains the original image. I can't make jqZoom change the zoomed in image to match the thumbnail.
Here is an example of what I'm trying to do. You click on the text and the thumbnail changes, but the larger jqZoom image remains the same. How do I change this so that jqZoom loads the new image in the zoom area?
<script type="text/javascript">
$(function() {
var options = {
zoomWidth: 250,
zoomHeight: 250,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100
};
$(".jqzoom").jqzoom(options);
});
function changeImgSrc() {
document.getElementById('bigImage').src = '4.jpg';
document.getElementById('smallImage').src = '3.jpg';
var options = {
zoomWidth: 400,
zoomHeight: 400,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100,
containerImgSmall: '3.jpg',
containerImgLarge: '4.jpg'
};
$(".jqzoom").jqzoom(options);
}
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom">
<img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;">
</a></select>
<br>
<div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div>
</div>
Thanks for your help!!
A simple way is to unbind the jqZoom whenever the image changes and then re-bind it once you've changed the source of your main pic
var jqzoomOptions = {
zoomWidth: 438,
zoomHeight: 390,
title: false
}
$("#mainPic").jqzoom(jqzoomOptions);
/* image thumbs */
$("#productPicThumbs a").click(function(){
// change pic source here
$("#mainPic").unbind();
$("#mainPic").jqzoom(jqzoomOptions);
return false;
});
I had similar problem with your...
I've got important tips from that site, please check it...
http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache
Old but good js plugin.
I have solved this problem with jQuery, changing the jqimg attribute on the picture source:
$("#foto_produto").attr("jqimg", "domain-url.com/sample3.jpg");
On the following :
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample2.jpg" alt="domain-url.com/sample1.jpg">
Finally obtaining:
<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample3.jpg" alt="domain-url.com/sample1.jpg">
You can also applies the jQuery "attr" function to change the "src" and "alt" of that div.
This is how you can clean the data from jqzoom:
$('.jqclass').removeData('jqzoom');
Because jqzoom keeps the data in this object:
$(el).data("jqzoom", obj);
Removing the main image and re-appending it should make it work, here is an example
$('a.main_thumb').jqzoom({ title: false });
$("a.thumb").click(function (e) {
e.preventDefault();
var thumbUrl = $(this).attr("href");
var thumbImg = $(this).find("img").attr("data-img");
$(".main_thumb").remove();
$(".current_thumbnail").append("<a href='" + thumbUrl + "' class='main_thumb'><img src='" + thumbImg + "' /></a>");
$('a.main_thumb').jqzoom({ title: false });
});
With the last version of jQZoom you can create galleries (jQZoom can manage it for you).
1.Attach the gallery ID to your main anchor "rel" attribute.
<a href="images/big-1.jpg" class="zoom" rel="gallery-1">
<img src="images/small-1.jpg" />
</a>
2.Manage your thumbnails "class" and "rel" attributes.
The class zoomThumbActive is attached to your thumbnails by jQZoom. By default specify this class to the selected thumbnail (it should be the same image in your main anchor element)
<ul>
<li>
<a class="zoomThumbActive" href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-1.jpg',
largeimage: 'images/big-1.jpg'
}">
<img src="images/thumbnail-1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0);" rel="{
gallery: 'gallery-1',
smallimage: 'images/small-2.jpg',
largeimage: 'images/big-2.jpg'
}">
<img src="images/thumbnail-2.jpg">
</a>
</li>
<li>
<!-- ... -->
</li>
</ul>
The structure of the thumbnail rel attribute is very important.
The base elements are :
gallery: the ID of the gallery to which it belongs,
smallimage: the path to the small image (loaded when you click on the
thumbnail),
largeimage: the path to the big image.