prettyphoto.js lightbox 'inline' always = null problem WordPress
- SOLVED
Gotta admit, this one is driving me nuts, as the directions are only 3 steps, yet it is not working for me.
I have my site setup so that if there is a custom field 'embed' in the post, to show the video in the lightbox when you click the image link. Simple enough.... however, the pop-up always shows 'null'.
The directions were simple:
<blockquote>To open inline content, simply:
1. Create a link (<a href=”#”>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it is the ID of the inline content you want to open with the ID CSS selector (#).
</blockquote>
my code:
<?php if (have_posts()) : $count = 0; ?>
<?php while (have_posts()) : the_post(); $count++; ?>
<?php $rel = 'rel="prettyPhoto[gallery]"' ?>
<?php $videorel = 'prettyPhoto['. $post->ID .']' ?>
<!-- Post Starts -->
<?php woo_post_before(); ?>
<li class="all-four-rounded-corners3">
<?php $video = woo_embed(); ?>
<?php if ($video<>"") { ?>
<div class="cover-video">
<?php } else { ?>
<div class="cover-image">
<?php } ?>
<?php $video_lightbox = woo_embed('width=600&height=400'); ?>
<?php if ($video_lightbox<>"") {?>
<a rel="prettyPhoto" href="#<?php echo $videorel; ?>"><?php woo_image('width=218&height=150&class=photofade&single=true&link=img'); ?></a>
<div id="<?php echo $videorel; ?>" style="display:none" >
<?php echo $video_lightbox; ?>
</div><!-- /#lbp-inline-href-1 -->
<?php } else { ?>
This seems to be outputting exactly what is requested on my site. However, I always get the 'null' warning in my lightbox pop-up.
site:
[[LINK href="http://shawn.theanointedone.com/"]]http://shawn.theanointedone.com/[[/LINK]]
Click on the first post 'tilt shift example' under recent posts, and you will see the problem.
**My other recent posts that do not have video's show the image in the pop-up properly, so I know for sure that I have prettyphoto setup correctly. It is only the inline problem.
To sum it up:
My href value does match my div id value for the prettyphoto inline to find. The div I want to show in the lightbox does contain the video.
I'm out of ideas, and I'm sure that I am just missing something really stupid simple somewhere.
prettyphoto site:
[[LINK href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/"]]http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/[[/LINK]]
site problem #2
Try my site in IE9, notice what happens to the other pop-ups, they are very skinny. This even happens on other sites using this plugin...
any ideas on an easy fix for this, something IE9 is doing different than normal?
Answers (2)
Andrzej answers:
This prettyPhoto[123..] - with brackets indeed doesn't work, but then I changed it to a string - as opposed to array - value, i.e. prettyPhotoX - it seems to work?
shawn comments:
Ahhha knew it was something simple...
One related question, now that it's kind of working.
Any idea why the box does not resize to fit the video like it does when showing images?
--It seems to only use the default width set in the js itself
also, any idea on the IE9 problem?
Andrzej comments:
Hopefully that would do?
I see you just added addtitional task to the question, about IE9 ;). It's another problem really that requires more time/bidget and out of scope of this question - so I'd suggest either to put it into new question or increase budget for this one (at least by $15).
shawn comments:
No problem
You solved the problem so you win, was just curious if you had any idea what the IE9 problem might be is all.
I know it has to do with the actual script itself as every site using it has this issue.
Paypal is empty, but will refill it and ask later sometime
thank you very much!
p.s.
Have you ever come across a lightbox that also has a full screen mode?
been hunting for days to replicate what hotmail is doing now with silverlight, no luck.
Andrzej comments:
regarding the size, you might want to play with the values at http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/ , especially "allow_resize: true" ?
Jimish Gamit answers:
which browser are you using ?
shawn comments:
Andrzej Zglobica just solved the primary problem for me
thanks though