Image gallery that is opened via a preview with fancybox - javascript

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.

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.

Colorbox - I'm looking into adding a url at the bottom of displayed image. This link will pass the image location to this frame src

Colorbox - I'm looking into adding a url at the bottom of displayed image. This link will pass the image location to this frame src for example:
--frame src="annotate.php?folder=2013&image=20130506_000043_2048_0193.jpg" name="frame1" --
The image location will be passed into annotate.php which is an annotation script to record mouse click coordinates. I can hard code an image for testing, but have yet to find a slick way to push an image from a gallery to the annotate.php module. We integrated a colorbox gallery into the web app and would hope to use the galler to send the image.
Thanks!

Force image to save when clicking on download link

I am using a wordpress theme that show images in lightbox when clicking on theme, but it also do it for links, I want to kip the lightbox for the images, but offer to download when clicking on download link, the theme I am using is baic from themify
and here one option inside the theme, when deactivated it just open the image in new window
here a link http://bit.ly/1xG2dQC to the page I am working on, you can see the download link under the image
thanks

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".

How can fake URL on hover and right-click (copy link localtion) but not on the click?

My website is running Wordpress and I use fancybox to nicely load images and image galleries. The cleaned version of my Wordpress loop output ends up looking like this:
<article>
<img src="image1-thumbnail.jpg" />
<div class="nodisplay">
</div>
</article>
When the user click on the image1 link, the images gallery is launched via fancybox and this is great. I can also provide a direct url to this gallery:
http://www.visualise.ca/#1460
My problem is that when people will visit my website, they will sometimes right click on the thumnails in order to copy the link of the gallery and they will end up giving the following to others:
http://www.visualise.ca/image1.jpg
instead of:
http://www.visualise.ca/#1460
So I would like to fake the url in order to make sure people give the right one to others (url with hash). I have to make sure the url to image1.jpg is changed to [http://www.visualise.ca/#1460][7] on hover and right-click but not on the click itself.
I also think the javascript or jQuery code has to be done inside the loop so I can use the following:
<?php bloginfo('url'); ?>/#<?php the_ID(); ?>
to obtain this from Wordpress:
http://www.visualise.ca/#1460
Many thanks for your time and help.
You can tweak your fancybox script to use image as a background instead and link it your desired link.
something like this..
This way the "Copy Image Location" would not be displayed, and the "Copy Link Location" will copy the URL that you want.
Alternatively
You can use javascript to track
right clicks that are made, hide the
context menu and copy the location
into the clipboard and intimate the
user about it. (less user friendly)
The last option is provide a button
like "Copy Image URL" which on
clicked will copy the URL to
clipboard.

Categories

Resources