Javascript: Making modal popups for all images on a page - javascript

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/

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.

Exclude images from lightbox in "Photo Swipe Masonry"

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.

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.

Trying to open some links with an inline modal popup window

I am new here so bare me with some time. I want to open some of the links in my page with an inline popup window.
I guess that those special links have to have a different id attribute that triggers the jquery script
I used the script from this page sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ that has a simple code with great result
The problem is that this script shows the content of the div and am trying to show the page of the link
Thank you very much for your help and info.
It sounds like you're not trying to show inline content, but just a normal modal with an iframe or ajax. You would probably be better served using fancybox.
Fancybox has good documentation and should be easier for you to set up.

how can i popup picture in php?

when picture viewed ,when me click on it picture will display as pop up, and back screen will be light black?
Shouldn't be done with PHP alone, since you don't want to reload your page every time you click on an image. Google for lightbox and use an appropriate JavaScript library for client side effects :)
use jquery there are many plugins to do it http://leandrovieira.com/projects/jquery/lightbox/ for example
See this site: http://ajaxian.com/archives/lightboxjs-easy-image-overlays-with-javascript
Check out Lightbox or Lightbox2

Categories

Resources