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".
Related
I wanted to create an image gallery that opens via a preview and links to another page where the images are located.
like this one https://fancyapps.com/playground/XU. but the link must call up and open the image gallery located on another page.
I tried using ajax but I can't. Can anyone help me?
Your question is not clear:
"links to another page where the images are located"
"open the image gallery located on another page".
If you're thinking that Fancybox will load the content of another page to find the gallery links and then use those to display the image gallery, sorry, but that's not supported.
But you can always create your own click handler that determined the content source and then use the Fancybox.show() method to programmatically start Fancybox.
I'm using the Royalslider WP plugin and a very minimal simple fade gallery, and there is the option to navigate-by-click which means the user can click anywhere and the next image loads.
What I would like to achieve is to have a 50%-50% line and if the user clicks on the left side of the screen, the previous image loads, and if clicks on the right side, the next image loads.
I found this but I can't get my head around writing the rest of the necessary JS code.
http://help.dimsemenov.com/discussions/problems/58856-navigatebyclick-previousnext-slide-based-on-cursor-position
http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-where-to-put-slider-javascript-api-code
Any help is appreciated.
Thanks!
i have website with 200 post and each one have +50 pictures without text content and that slow down the loading of my website .. i want to split the loading of picture using a button when the user click on it will be loaded more 10 picture and so on till the end and i don't know how to add the js function to the word-press
i found some plugin but split to many pagy with <--next page -->
but i need some thing like that to keep the user in the some page
"Lazy Loading" might be able to do what you need, although not exactly what you would like to do with a button and javascript. It is an optimization technique that only loads a picture when it's visible on the area of the browser, and delay loading the rest of the pictures until you scroll down or when they should become visible.
You can configure that when a page loads, only the pictures that are "Above the Fold" (printed on the top half of a browser without scrolling down) should load, and delay loading the rest until a user scrolls down to reveal them.
You can check this document How to Implement WordPress Lazy Load on Images and Videos.
Check out these lazy load plugins:
https://wpneon.com/best-wordpress-lazy-load-plugins/
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.
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?