prettyPhoto support - Vanilla 2

Initializing prettyPhoto to load from area maps, and regular links at the same time?

mosesdark — Sat, 14 Jan 2012 00:16:08 -0500

Hello there.

I have my code set up to load an image from an image map using the tutorial on this site. Which works perfectly.

// ^area shape="poly" coords="371,374,317,266,203,229,257,337" href="images/illustrations/title_a.jpg" rel="prettyPhoto[illustrations]" onMouseOver="MM_swapImage('tesseract','','images/illustrations.gif',1)" onMouseOut="MM_swapImgRestore()"^

However, I would love if it would also load all ^a href links also.

I believe this would allow me to include several links within the body of the html, all grouped to this gallery by the rel="prettyPhoto[illustrations]" but invisible.

So I would technically have an area map opening a gallery with a single click.

Help!!!!Inline content not working.

val23 — Fri, 20 Jan 2012 17:54:14 -0500

I created both div and class:

#inline-1 { width:600px; height:500px; float:left; overflow: auto; line-height:normal; }

.hide { display:none}

Inline content still not showing!

Multiple issues with Pretty photo. :(

mobiius — Fri, 16 Dec 2011 09:25:56 -0500

Hello! First off, great tool! The demo on the website is fantastic!

The first of my problems is as follows. I would like to have a facebook style image gallery on my website. There will be a grid of images displayed, and when you click one it opens in a prettyPhoto lightbox. I however don't want it to be treated as a gallery in the lightbox. I'd like to setup many lightboxes, one for each image/video in the gallery. Currently, it will setup as a gallery so I had to hack about with 'teh codez' to get it to work the way I'd like. It's not pretty and I'd like to do it 'officially' if I can.

The second problem is, the lightbox works fine on my offline webserver, but when I upload it all to my online webserver, it doesn't work at all. The same files/folder layout/html, but without the workingness.

You can see the under construction website here: www.teamdefiant.co.uk/test/ (the lightbox is currently setup on the 'On The Track' at 'Japfest 2011' link in the middle of the 5 boxes.)

[SOLVED] Need help! Javascript not working inside prettyPhoto inline box

darryl — Tue, 23 Aug 2011 01:51:33 -0400

Hi all,

I have problem in javascript inside prettyPhoto inline box:
Here is the example code:

Inline content 1

Google

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();

// test 1
$("#inline_demo a").mouseover(function() {
$(".blue").css('color', 'blue');
});
// test 2
$("#inline_demo a").click(function(e) {
e.preventDefault();
});
// test 3
$("#inline_demo a").mouseover().css('cursor', 'crosshair');
// test 4
$("#inline_demo a").mouseover(function() {
$(this).css('cursor', 'crosshair');
});
});

TEST RESULTS:
// test 1 not working
// test 2 not working
// test 3 working
// test 4 not working

Why is that the jquery events that has event handler is not working?
In other words event handlers inside jquery events doesn't seem to work.

Please help.

Thanks,
Darryl

Only the default 3 photos in elegant-press template load using pretty photo. How do you add photos?

joeldm — Thu, 19 Jan 2012 09:52:10 -0500

I'm trying to set this site up to load 10 images in the slider, but only the first three run, where do I set parameters like this (adding more photos to the slideshow?)

What's wrong with the code?
http://www.iwannafixit.com/ATLCP/

Opening 2 photos simultaneously

axel — Thu, 19 Jan 2012 07:44:40 -0500

Hey. I'm trying to open 2 items when clicking on the first one.
Basically I'm in a "Before/After" pretty photo gallery and when I click on the "before" thumbnail, I want both the "before" and "after" images to pop up at the same time.

Any idea how I can put this into work ?

Thanks.

overlay gallery not shown

eauth — Wed, 18 Jan 2012 13:26:03 -0500

I have multiple gallerys on the same page. When one of them has more than 30 pictures, the overlay gallery is not shown as expected. But if I click on any other gallery with fewer pictures on the same page, the overlay gallery doesn't show up there too whenever the large gallery with >30 pictures has been opened before.

Error: In a image gallery, Twitter link does no update on next/prev

preethamms — Tue, 17 Jan 2012 14:11:39 -0500

I have a image gallery with social icons.
After I open the gallery, I will do a next/prev.
The twitter link wont update. I will still share the image I had opened first.
The twitter link has to update on clicking next/prev

Loader Gif/image while Flash SWF is loading in PrettyPhoto

waxyfoot — Fri, 02 Sep 2011 00:58:22 -0400

Hiya, I am pretty new to this and was hoping someone could help me.

I have created a PrettyPhoto Lightbox that has 3 flash swf's in it. Works great and is brilliant, just what I need, however when I publish it to the web and you click to launch, it works great but has a blank screen for a good 5 to 10 seconds before the flash movie plays. Is there anyway I can display a loading icon/animated gif just informing the end user that something is indeed happening in the background.

Many Thanks in advance.

David

i beg all of u to help me out how to install pretty photo and use

creativeguy0904 — Tue, 17 Jan 2012 05:59:44 -0500

hi there. i'm trying to use pretty photo since a month i can't really figure out what to do where to go. i tried wordpress plugin pretty photo version 1.6.2 that too doesn't work's.

i'm trying to follow pretty photo link : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

but it's not clear to me after downloading which files should be place under which folder of theme and where to add the script's.

if anyone can help me out i would be thankful to them.

hoping for some help.

Static window in iframe

cableghost — Sun, 15 Jan 2012 14:22:01 -0500

How may I set a static width and height for iframe window?

Instead of '?iframe=true&width=100%&height=100%', I would like to use something like: '?iframe=true&width=450px&height=600px'. However, the iframe window does not seem to like px.

Box not being resized automatically

melanciabr — Mon, 16 Jan 2012 06:35:04 -0500

Hi,

I've managed a way to resize the iframe to fit its content accordingly, as I got all the pages under the same domain. Problem is, when I do resize it, the PrettyPhoto box doesn't resize itself, and I couldn't even found a way to do it manually.

Any ideas?

Thanks!

prettyPhoto loads on browser refresh

skyetech — Thu, 18 Aug 2011 13:27:36 -0400

I've used prettyPhoto to display galleries, YouTube and Flash, but I'm having a "refresh" problem when I use single images. prettyPhoto opens when I click on a thumbnail and it appends #!prettyPhoto/0/ to the querystring. But when prettyPhoto closes it's not removing the /0/, so the same image opens again when the page is refreshed. I've looked at the demo page and it removes the /0/.

My code couldn't be any simpler. Any thoughts about how to remove the /0/ or keep prettyPhoto from loading on refresh?

$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:false,theme:'light_rounded'});});

My development page: http://www.sremarketing.com/untitled-3.html

longer captions for prettyPhoto

rickycolson — Sat, 14 Jan 2012 15:12:22 -0500

I'm using custom fields within wordpress to enter captions for the prettyPhoto api, but I cannot enter more than one line. I'm interested in adding 4-5 lines, but when I do either no text shows up at all or my browser crashes when adding multiple paragraphs. How can I extend the lower caption area further than one line?

Thanks,
Ricky

FLV video format

lkgoldie — Fri, 13 Jan 2012 11:19:24 -0500

I am working with a wordpress theme that has pretty photo installed on it. I set up the photo gallery with no problems but I now am having problems with the video. I am using FLV video format with jwplayer. So my first question is does pretty photo support FLV video format? I am getting different answers when I do a search on the site - not supported but possible with a bit of coding. I would like to host the video from my server and not through youtube or vimeo.
Any information is appreciated.

Bug in _fitToViewport

zgollum — Fri, 13 Jan 2012 11:02:00 -0500

There's a bug in _fitToViewport which makes large photos look really weird, I'm really surprised it's not mentioned on these forums.

Line 592, after determining new container dimensions for resized photos, fitToViewport calls itself with dimensions of the container (as if container was the image itself) instead of using resized image dimensions which are smaller. The result is an image with wrong aspect ratio.
The line 592 should be:
_fitToViewport(imageWidth,imageHeight)

and NOT _fitToViewport(pp_containerWidth,pp_containerHeight)

Support for pinch and zoom on popup using preety photto

gauraw — Thu, 12 Jan 2012 23:01:41 -0500

When i zoom the content of popup, the window size ll resize and according to default feature of pretty photo it shift to center of the page. And the position of popup will go to different location but i want to show the popup on the screen. Please help me to fix this issue

Does prettyPhoto work with .mp4's?

apamment — Thu, 12 Jan 2012 21:16:37 -0500

I want to gallery some TV commercials I've done as a portfolio. I've chosen mpv format because of the smaller size and it plays on most everything including iphones. I'm sure I have the code right and the scripts in the right locations with the correct paths because if I switch the movie files to back to .mov's it works fine. But when I use mp4 I get this message

"Image cannot be loaded. Make sure the path is correct and image exist."

My thinking is that either prettyphoto doesn't support mp4 or that I have to specify the media type somewhere. Does anyone know the answer?
I have since switched to shadowbox and that works with mp4.

My page with the prettyphoto code is
www.clearlybetterdesigns.com/video2.html

PrettyPhoto: Vimeo content doesn't work on IE9/IE8/IE7

kandadaboggu — Thu, 17 Nov 2011 14:59:47 -0500

The frame shows an empty black box. The behavior can be reproduced at the PrettyPhoto site http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone.

Disable prettyPhoto on Mobile Devices

neurosismann — Mon, 07 Nov 2011 11:17:12 -0500

Is it possible to add a conditional statement that would disable prettyPhoto if the browser screen was under 480px and open the image in a separate page? I'm jquery literate but I'm really bad at if else statements.

"title" and tooltip

sirubin — Tue, 10 Jan 2012 19:55:20 -0500

In prettyPhoto, how can I have the photo description come from something other than "title" (added to tag surrounding the )? When hovering over the image, it displays ugly html on my website that I only want to be seen and displayed by prettyPhoto when it opens (hence it contains html), but not as a tooltip.

One thought I had was to plug into an event but the only one relevant is changepicturecallback, and I can't figure out how to access the current photo element from that.

Maybe it's something in jQuery itself but I'm a little lost as to where to find it.

Any idea would help.

Thanks, Igor

facebook like, no workie?

NineInchNachos — Sat, 17 Dec 2011 03:38:39 -0500

Here is my working example: http://www.holisticforgeworks.com/art/

Thanks for your help!

Display in IE 7

jsbx — Tue, 10 Jan 2012 15:35:36 -0500

hi there,

I had implemented the PrettyPhoto scripting and modified it slightly to fit the designer's template design.

Clicking on the third image in the top row of images produces the pop-up gallery window:
http://www.inorbital.com/projects/revera/intranet/template-galleryListing.asp

The Previous and Next buttons are apparently displaying incorrectly in IE7 on a client's machine. I am viewing it on my machine and another, and it displays just fine.

This is what the client is seeing:
http://www.inorbital.com/projects/revera/intranet/galleryIncorrect.jpg

This is how it should be displayed:
http://www.inorbital.com/projects/revera/intranet/galleryCorrect.jpg
I am testing this on IE 7-9, Chrome and FF and have not seen any problems.

Any input or suggestions will be much appreciated.

Thanks!

Issue resolved. Thank you!

Chrome automatically launches iframe after parent.document.main_form.submit() - not intended

blackmanx — Thu, 17 Nov 2011 15:28:57 -0500

so...PrettyPhoto is an incredible piece of software and works great for us with one (unfortunately critical) exception - ONLY in Chrome (not FF, or IE), when you post a submit back to a page CHROME reloads and pops a modal IF there is an IFRAME modal in the code.

Here's the code for the test (test.html):

Test Value:

pop iframe

$(document).ready(function()
{ $("a[rel^='prettyPhoto']").prettyPhoto(); } );

test_prettyphoto_pop.html

Set value, submit and Close

This works fine in IE and FireFox, but fails in CHROME. Has anyone run into this/ have any ideas on why CHROME will pop the modal after the submit invoked from the modal? (note that the modal will not launch by itself if a submit is done from the main window, it only seems to happen as a result of the submit from the modal.

Any help appreciated.

thanks!
- rich

A few issues: neither images nor videos are showing up, and social media buttons not showing

Amanda81 — Mon, 09 Jan 2012 17:30:33 -0500

Hi there Stéphane,

Fellow Montrealer here...hoping you can assist with this. :)

The page I'm working on (as a test) is http://girlsguidetowebdesign.com/contest-test/.

I think I've installed everything correct (I'm running Thesis), but as of right now, neither of the two examples of on the site are working. When you click the one on the left (example image 1), the lightbox opens, but it appears to be empty. When you click the one on the right, you get an iframe that shows about .5 cm of the top of the video.

Any thoughts on what I'm doing wrong?

Thank you!

FB LIKE button working locally but not in production

markmardon — Wed, 28 Dec 2011 23:06:51 -0500

I'm having a problem with my Facebook LIKE buttons. When I'm working on my localhost, everything seems to work fine. I bring up a photo gallery, select an image, LIKE it and it appears on my timeline with the //localhost URL. No problems. Exact same code deployed to production and no joy on my timeline.

The only modifications I've made are some minor tweaks to the css file.

Here's an example of where it doesn't work:

http://berlin.medialayer.net/~spirit/html/galleries.php?page_name=gallery&category=cambodia#!prettyPhoto[cambodia_1]/0/

Thanks in advance!

Facebook like link back to

indyhr — Sun, 04 Sep 2011 17:26:22 -0400

I would like my facebook like button to link back to the picture, with my website showing in the background. Current function is that when ppl click on link from facebook, they get the link to the specific picture in a browser window, and nothing else. I would like my users to be able to get a preview of the picture, the web in the back and an option to close picture and keep browsing the gallery.

Is there any way to accomplish this? Anyone has any idea?

Iframes in Mobile Safari

lizannem — Fri, 30 Dec 2011 13:45:34 -0500

I love the pretty photo plugin and I use it to display small iframes- my workaround for an SEO friendly modal. The problem I have is that in my iframes, the content is not scrollable using an ipad - the frame doesn't stay inside the container, but extends past the bottom boundary (I have frame height set to 95% page height.) I've tried setting overflow; auto and using conditional statements to get mobile browsers to ignore pretty photo - but so far nothing seems to work with this plugin. Does anyone know what I need to tweak in my .js or .css to get this working?
For an example- all you have to do is visit the No Margin for errors page and click on the iframe demo using an iPad or iPhone.

prettyPhoto API

ErnestV — Mon, 09 Jan 2012 14:07:32 -0500

You mention in the documentation the JS API. Now, when I use the "open" method, how am I able to add the same configuration to the gallery that I can pass when using the constructor method on $(document).ready()?

Something like this perhaps?


$.prettyPhoto({configuration});
$.prettyPhoto.open(api_images,api_titles,api_descriptions);

Thanks for any enlightment!

Facebook Link

vaccarezzalino — Mon, 09 Jan 2012 13:14:45 -0500

Hi and thanks for your very good work.
I added PrettyPhoto script in my site but i have some problem with facebook ilike button's url.
The correct address is: http://www.mysite.web/gallery.php#!prettyPhoto[gallery1]/5/
But the Ilike Button go to: http://www.mysite.web/gallery.php?_escaped_fragment_=prettyPhoto[gallery1]/5/
I think to understand the problem is in js at encodeURICompenent but i don't know how to correct...
Can u help me? Thank You.
Lino (Italia)