Bootstrap Image Gallery - open modal image in new window - javascript

So with the Bootstrap Image Gallery addon created by Sebastian Tschan we can open images in a modal window and we can use slides or buttons to load up the next or previous images but there is an extra event action (left mouse button click on the loaded image) that does the same as "next" button (it loads up the next image) This function is a bit useless for me, so I thinking on modifying this click event, adding a better functionality to it.
Question is: How can I open the currently seen/loaded image in a new window with this event like HTML target="_blank" ?

Related

iOS buttons in overlays fire additional clicks on elements below the overlay

I am facing a strange problem on iOS devices.
When clicking on buttons/links in an overlaying container, the element below fires also a click event. I have a "filter" button that opens an overlaying div with all the filter options. The closing button on the overlay is located directly over the button, that triggers the overlay. When I click on the close button, the overlay closes, and with a small delay, a click on the filter button is executed again and opens the overlay.
This also happend when I build my mobile menu, where I had a burger button on the top right which opens my mobile menu. The closing button was located where the burger button was. When clicking on the closing button, the click on the burger button is executed again and opens the menu.
I tried to bind a stopImmediatePropagation() to the buttons, but this doesn't work out. This only happens on iOS, Android and Desktop is fine. The functionality of the overlays comes from my used e-commerce system (Shopware 6). It is not only happening with buttons, but with other elements like divs and spans with a functionality to hide/close overlays.
Any ideas how to get rid of this?
Best regards,
Alex
I could solve it with fastclick.js
https://github.com/ftlabs/fastclick
Not what is designed for, but fortunately it solved the click issue on iOS.

Bootstrap modal shows all images and not limited to the images in any given Tab

My question is about a bootstrap snippet as you can see here:
https://bootsnipp.com/snippets/P2gor
I wanted to use this gallery with tab views as you can see below. But my problem is that when click on first tab (Animal) and open image modal, I see the next button until all images in all tabs are shown. And when I click on second tab (Painting) the modal opens app empty and neither previous nor next button works.
First Tab
Second Tab
I want to be able to use this snippet with Tabs, so I'm here seek advice what can I do to make it work. When I click on first tab and browse the images in the modal, I want the next button to disappear when the last image on the current Tab is shown, not after all other images are shown.
Because there is no argument (id / class) passing to the JavaScript methods, I can't figure out how to make this work without making lots of duplication in the JavaScript file.
I'm sorry if this question is too generic and not enough specific.

Next function doesn't work for Magnific popup

I have tried to apply Magnific Popup to a content gallery.
Each link will open an individual popup from different gallery.
However, I bump into this issue that when the popup open, I click Next and all popups disappear. Meanwhile, if I click Previous, it still loads the previous popup.
Here is my code
http://codepen.io/anon/pen/EbDwJ
How can I fix the Next function here?
Seems like the plugin is having a hard time with the index being a string, you should cast it to an integer:
var index=parseInt($(this).attr('data-index'),10);
Here's the updated codepen

how to preserve current state in image gallery?

I have a website(dwarfdog.com/cds_studio) which uses an image thumb gallery and has a next/prev arrow to view move images from that gallery. I can also view a detail page of an image by clicking on to it.
The requirement is when i am navigating to a second/third page in the gallery and click the detail page to view and when i am clicking "back" button on the detail page it takes me to the first page of the gallery rather the one i was in.
This website is developed in PHP(wordpress) for backend coding and jquery for the image gallery section.
Can anyone suggest me how do i preserve the current state of the gallery when i am coming from detail page to gallery page by clicking "back" button?

Fancybox stops working when invoked twice in the same browser session

I have an odd problem with Fancybox. Using version 1.2.6 (yes it's old, but that's what I'm stuck with currently), I invoke an iframe via a button click (see screenshot below)
Everything is fine if the user selects a radio button and submits the form. However, if the user closes the fancybox then invokes the iframe again (using the same button click as before), the form is not clickable. Instead there are left and right arrows on the iframe as if it's trying to display a picture (see screenshot below)
The only way to 'fix' the issue is to reload the page or not dismiss the fancybox in the first place.
[UPDATE]
Here is how I invoke the fancybox. To dismiss the fancybox, you have to click on the "Modify Address" button.
$('#hidden_link').fancybox({
frameWidth:400,
frameHeight:500,
hideOnOverlayClick:false,
hideOnContentClick:false,
showCloseButton:false
}).trigger('click');
The element #hiddenlink is a hidden href.
[UPDATE 2]
Firebug displays the error Image corrupt or truncated: data:image/gif;base64,AAAA when this occurs. Not sure if that is related or not.
Does Fancybox create a container div for the modal on page load, or does it create it on demand? If it creates one on page load then it might offer a "destroy" or "delete" method you can call on close.
If it creates one on demand then you might be able to explicitly destroy the existing one on close.

Categories

Resources