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.
Related
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.
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've seen a lot of questions and answers here that help you too embed PDF documents, but they are all "vertical read", where you scroll down to see other pages.
Is there any plugin, or maybe even a simple script that would help you to embed and read the PDF document horizontaly? Like where you see two pages and click next on top to see the next two.
Just like a book. (No fancy animations though)
Thanks.
There are plugins that lets you read pdf documents. But they might be fancy.
http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
or
http://fliphtml5.com/free-pdf-to-jquery-flipbook.php
I like the last one especially
You can set the initial view of a PDF to show two pages.
If you add Fullscreen view to that, and the user has not deactivated clicking to the next page, it actually should give the effect you want (not verified).
If the Fullscreen view does not work, your user would use the cursorLeft and cursorRight buttons to navigate.
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.
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.