Exclude images from lightbox in "Photo Swipe Masonry" - javascript

i am using the "Photo Swipe Masonry" plugin (version 1.0.6) on wordpress 4.3.1.
It works perfect so far.
But, i have some images which have a custom link to an external url(instead of the stadard to the image). If i click one of these images, it opens the url in a new window. That works like expected.
Now, when i click on an standard image(no external url), the lightbox opens and the image is displayed like expected.
But now, when i use the prev/next buttons to navigate through the images and i reach an image with a custom link, i got the errormessage:
"The image could not be loaded" (in the lightbox).
So, my question is, how to exclude images from being added to the lightbox?
Maybe by a unique class ?
Any help is highly appreciated.
Many thanks in advance to all of you for your time.
Regards,
Joe

I'm the developer of this plugin. Sorry for missing this post. There is no function built in for this sorry. You would need to edit the photoswipe code.

Related

I need to insert a slider in a blog page

I have created a blog www.rajputanahomes.com, when someone clicks on a blog a page opens with details of the blog and pictures related to it.
Now what i am trying to do is when someone clicks on one picture the picture must pop up and the pop up must have next button so all the images on existing page can be seen. I am using CKeditor to upload content on the page.
Is there any way we can put code on each html page created dynamically so the above feature works.
You can use any of the many free lightbox plugins. One of the easiest to use is colorbox.

How do I trigger a lightbox gallery in html or javascript for a single image?

Here is my question,
Can I place a script or a code of some sort next to an image to make it pop out in a lightbox, without messing with the css? Just a simple single image that when clicked on just pops out in a lightbox.
Sort of like this:
<img src="image">
But instead of ref to a url, I would like to make a full screen lightbox pop out. So the user doesn't have to click back or open another tab.
Any help is highly appreciated.
Yes you can, I like Fancybox as an versatile jQuery tool with many functions and options. See here for examples.

How to launch a LightBox gallery from an 'a href' hyperlink

Stack Overflow have provided some very useful tips re: running multiple LightBox galleries etc, but I have one further question I hope you guys can help with...
Within the static HTML page, I have a single image that the user clicks on to launch the LightBox gallery; pretty simple stuff really, just like the regular LightBox demo.
However, I want to include a 'a href' button just underneath the image that actually says "click here to view gallery" (for those users that may not know that they need to click on the image to launch the gallery etc).
Can you please let me know what code I need for a basic 'a href' button to launch the LightBox gallery as soon as it is clicked?
Many thanks
If you read the How to use part on the lightbox site, you can see what matters:
The rel="lightbox" attribute. This means that this link is supposed to be opened as an image in a lightbox overlay, so it does not matter what is inside the <a> tag.
Also there is an example about grouping these links:
image #1
image #2
image #3
Notice that the rel="" attribute changed. There is a [groupname] part after lightbox. Links with the same groupname will open in one gallery.
This unobtrusive approach of lightbox2 works well if you have little knowledge about javascript. No need to write a single line of javascript code only use rel attributes.

Javascript: Making modal popups for all images on a page

I am trying to implement a pop-up modal for all images on a Wordpress page. I don't want to manually assign which image names are going to use the modal popups. I have several hundred pages that already have an image imbedded in them.
Would anyone know how I could get started doing this? Is this possible to do with Javascript alone?
Thank you in advance.
If you need to do all the images in a pop-up modal then you can simply use this plugin named: "Easy Fancybox".
Download the plugin here: http://wordpress.org/extend/plugins/easy-fancybox/

Fancybox / Galleriffic conflict - main image navigation link

I'm in the process of building a web showcase page that uses Fancybox v2.0.6 to open a hidden div when a user clicks a project thumbnail image. Each Fancybox div contains an overview for each project and a Galleriffic gallery of screenshots. I've been able to utilise multiple Galleriffic galleries on this one page thanks to this Google Group Discussion, but have run into issues with the main image.
By default in Galleriffic, users can navigate the gallery by clicking the main enlarged image or by choosing a thumbnail. The thumbnails are working no problems. However, when I click the main image, instead of showing the next image in the gallery, the Fancybox div disappears and a loading spinner appears - I think it belongs to Fancybox. If I then click the spinner div it closes and I'm back to the original webpage.
The best solution would be to remove the linking from the main image and just use the thumbnails to view the gallery. My various attempts have been unsuccessful - either the image vanishes or the spinner just continues to load.
Any ideas/suggestions are welcome at this stage! If you need to see any code to play around with, just let me know and I will post.
Many thanks in advance!
EDIT: Here's a link to a stripped-down version - if I view it locally then the loading spinners just sits there, online I get a URL error in the Fancybox: "[object HTMLDivElement] was not found on this server".

Categories

Resources