WordPress › Support » PDF not working and overlay not closing.

jhkb
Member
Posted 11 months ago #

Hi,

Just installed and activated easy fancybox. I have a page on my site showing jpg's and pdf's. The jpg's are working fine except once the image appears the 'X', when clicked, does nothing and I have to refresh the page to close it.

The second problem is with the PDF's. I've selected to include PDF's with auto detect on and off and they still appear in chrome's plugin, or in firefox start to download.

Is there something i'm doing wrong? The site i'm working on is on my local server so i'll try to describe whats happening as best I can.

Thanks in advance!
Jess
RavanH
Member
Posted 11 months ago #

Sounds like a conflicting script on your site... or a theme incompatibility. Do you have a link?
jhkb
Member
Posted 11 months ago #

Ah, it's all held on the localhost on my machine at the moment, sorry. Can I paste any code to help? I've got Contact Form 7, Galleria WP and WP Paginate activated.

I've built the theme myself, is it possible I've left out some crucial tags?
RavanH
Member
Posted 11 months ago #

You can use the contact form on http://4visions.nl/en/contact/ if you want to send me the source :) but I doubt staring at the page source will reveal the conflict... unless it's a basic thing like leaving out wp_head() in your header.php...

jhkb
Member
Posted 11 months ago #

This is the code for the page the images/pdf's are on:

<?php
/*
Template Name: Press
*/
?>
<?php get_header(); ?>

<div id="content" class="wide">
    <h1 class="h1-border"><?php the_title(); ?></h1>

  		<div class="grid-press">
			<a class="press" id="press1" href="<?php bloginfo( 'template_directory' ); ?>/images/press1.jpg"></a>
			<h3>Perfect Wedding: Circus</h3>
		</div>

		<div class="grid-press">
			<a class="press" id="press2" href="<?php bloginfo( 'template_directory' ); ?>/images/press2.jpg"></a>
			<h3>Clifton Life Guide</h3>
		</div>

		<div class="grid-press">
			<a class="press" id="press3" href="<?php bloginfo( 'template_directory' ); ?>/images/press3.pdf"></a>
			<h3>Perfect Wedding:Venues</h3>
		</div>

		<div class="grid-press">
			<a class="press" id="press4" href="<?php bloginfo( 'template_directory' ); ?>/images/press4.pdf"></a>
			<h3>Perfect Wedding:Village Hall</h3>
		</div>

		<div class="grid-press" style="margin-right:0px;">
			<a class="press" id="press5" href="<?php bloginfo( 'template_directory' ); ?>/images/press5.jpg"></a>
			<h3>Perfect Wedding: Oscars</h3>
		</div>

		<div class="grid-press">
			<a class="press" id="press6" href="<?php bloginfo( 'template_directory' ); ?>/images/press6.jpg"></a>
			<h3>Perfect Wedding: Military Chic</h3>
		</div>

		<div class="grid-press">
			<a class="press" id="press7" href="<?php bloginfo( 'template_directory' ); ?>/images/press7.jpg"></a>
			<h3>Perfect Wedding: Eco Chic</h3>
		</div>

		<div class="grid-press">
			<a class="press" id="press8" href="<?php bloginfo( 'template_directory' ); ?>/images/press8.pdf"></a>
			<h3>Perfect Wedding: Hot Topic</h3>
		</div>

</div>
</div>
<?php get_footer(); ?>

I had wp-head in there, but it was at the beginning of my head tags, and I've just read somewhere it should be before the closing tag. Now with the PDF's i'm getting the overlay (greyed page) but the pdf file isn't pulling through. The x to close still doesn't do anything.

The thumbnail images are pulled through in the css as background to the < a > tags to achieve a 'stacked' hover effect, could that be the problem?

I tried adding a 'dummy' transparent thumbnail into the < a > tag in case the plugin needed the two image files to work, but the same thing happened.

Thanks so much for your help!

RavanH
Member
Posted 11 months ago #

Ok, so you're hard-coding the media files into your theme. Any reason for that?

Anyway, I'll need the content of your header.php file to be able to say more about this... The only thing I notice here is the second </div> just before <?php get_footer(); ?> which might be redundant and could be throwing off the whole DOM structure.

jhkb
Member
Posted 11 months ago #

Yeah reluctantly, it was that or create an entire category with empty posts just to pull through one custom field image. I didn't want to over complicate the dashboard for the client (who'll be making minimal changes herself), so I coded this one section. Unless i'm missing a much better way...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

	?></title>

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />

<link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" type="text/css" />

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16239767-5']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<?php wp_head(); ?>
</head>

<div id="container">
<div id="header" class="shadow">
<h1 style="padding-bottom:0px;"><a id="title" href="..."><span class="none">The Little Wedding Helper</span></a></h1>
<div class="flower"><span class="none">Flower</span></div>
<div class="social_links">
		<ul>
			<li><a id="facebook" href="..."></a></li>
			<li><a id="twitter" href="..."></a></li>
			<li><a id="email" href="mailto:..."></a></li>
		</ul>
</div>
<div class="header_bird"><span class="none">The Little Wedding Helper</span></div>
 	<div id="links">
  	 	<ul class="nav">
   		<li><a href="/lwh/wp">Home</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/services/">Services</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/category/gallery/">Gallery</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/press/">Press</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/contact/">Contact</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/testimonials/">Testimonials</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/links/">Links</a></li>
   		</ul>
  	</div>
</div>
   <div id="box" class="shadow">

RavanH
Member
Posted 11 months ago #

Ok, don't see anything wrong with that header.php

Can you paste the complete source of the page in question that is fed to the browser?

jhkb
Member
Posted 11 months ago #

Do you mean the final rendered page source?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Press | The Little Wedding Helper</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/style.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16239767-5']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<link rel="alternate" type="application/rss+xml" title="The Little Wedding Helper &raquo; Press Comments Feed" href="http://localhost:8888/lwh/wp/press/feed/" />
<link rel='stylesheet' id='admin-bar-css'  href='http://localhost:8888/lwh/wp/wp-includes/css/admin-bar.css?ver=20110325' type='text/css' media='all' />
<link rel='stylesheet' id='easy-fancybox.css-css'  href='http://localhost:8888/lwh/wp/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4' type='text/css' media='screen' />
<link rel='stylesheet' id='contact-form-7-css'  href='http://localhost:8888/lwh/wp/wp-content/plugins/contact-form-7/styles.css?ver=2.4.5' type='text/css' media='all' />
<link rel='stylesheet' id='wp-paginate-css'  href='http://localhost:8888/lwh/wp/wp-content/plugins/wp-paginate/wp-paginate.css?ver=1.2.3' type='text/css' media='screen' />
<script type='text/javascript' src='http://localhost:8888/lwh/wp/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://localhost:8888/lwh/wp/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://localhost:8888/lwh/wp/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4'></script>
<script type='text/javascript' src='http://localhost:8888/lwh/wp/wp-content/plugins/easy-fancybox/fancybox/jquery.easing-1.3.pack.js?ver=1.3'></script>
<script type='text/javascript' src='http://localhost:8888/lwh/wp/wp-content/plugins/easy-fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js?ver=3.0.4'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/lwh/wp/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/lwh/wp/wp-includes/wlwmanifest.xml" />
<link rel='index' title='The Little Wedding Helper' href='http://localhost:8888/lwh/wp/' />
<link rel='prev' title='Wedding Gallery' href='http://localhost:8888/lwh/wp/gallery/' />
<link rel='next' title='Contact' href='http://localhost:8888/lwh/wp/contact/' />
<meta name="generator" content="WordPress 3.1.3" />
<link rel='canonical' href='http://localhost:8888/lwh/wp/press/' /> 

<!-- Easy FancyBox plugin for WordPress using FancyBox 1.3.4 - RavanH (http://4visions.nl/en/wordpress-plugins/easy-fancybox/) -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : false, 'titleShow' : false, 'titlePosition' : 'over', 'titleFromAlt' : false, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } }, 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false };
/* IMG */
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox');
var fb_IMG_sections = jQuery('article, div.hentry');
fb_IMG_sections.each(function() { jQuery(this).find(fb_IMG_select).attr('rel', 'gallery-' + fb_IMG_sections.index(this)); });
$('a.fancybox').fancybox( $.extend({}, fb_opts, { }) );
/* PDF */
$('a[href$=".pdf"]:not(.nofancybox)').addClass('fancybox-pdf');
$('a.fancybox-pdf').fancybox( $.extend({}, fb_opts, { 'type' : 'html', 'width' : '100%', 'height' : '100%', 'margin' : 0, 'padding' : 0, 'autoScale' : false, 'titleShow' : false, 'titlePosition' : 'float', 'titleFromAlt' : false, 'transitionOut' : 'fade', 'easingIn' : 'swing', 'autoDimensions' : false, 'scrolling' : 'no', 'onStart' : function(selectedArray, selectedIndex, selectedOpts) { selectedOpts.content = '<object data="' + selectedArray[selectedIndex].href + '#toolbar=1&navpanes=0&nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="100%" width="100%"><param name="src" value="' + selectedArray[selectedIndex].href + '#toolbar=1&navpanes=0&nameddest=self&page=1&view=FitH,0&zoom=80,0,0" /><a href="' + selectedArray[selectedIndex].href + '" style="display:block;font-size:18px;height:20px;position:absolute;top:50%;margin:-10px auto 0 auto">' + $(selectedArray[selectedIndex]).html() + '</a></object>' } }) );
});
/* ]]> */
</script>
<!--	Galleria WP	 [ BEGIN ] -->
<link rel="stylesheet" type="text/css" href="http://localhost:8888/lwh/wp/wp-content/plugins/galleria-wp/css/galleria_wp.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/lwh/wp/wp-content/plugins/galleria-wp/skins/metal/skin.css" media="screen" />
<script type='text/javascript' src='http://localhost:8888/lwh/wp/wp-content/plugins/galleria-wp/js/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='http://localhost:8888/lwh/wp/wp-content/plugins/galleria-wp/js/jquery.galleria.js'></script>
<script type='text/javascript' src='http://localhost:8888/lwh/wp/wp-content/plugins/galleria-wp/js/jquery.jcarousel.js'></script>
<!--	Galleria WP	 [ END ] -->
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css">
	html { margin-top: 28px !important; }
	* html body { margin-top: 28px !important; }
</style>
</head> 

<div id="container">
<div id="header" class="shadow">
<h1 style="padding-bottom:0px;"><a id="title" href="http://www.littleweddinghelper.co.uk"><span class="none">The Little Wedding Helper</span></a></h1>
<div class="flower"><span class="none">Flower</span></div>
<div class="social_links">
		<ul>
			<li><a id="facebook" href="http://www.facebook.com/thelittleweddinghelper"></a></li>
			<li><a id="twitter" href="http://twitter.com/#!/weddinghelperuk"></a></li>
			<li><a id="email" href="mailto:hello@littleweddinghelper.co.uk"></a></li>
		</ul>
</div>
<div class="header_bird"><span class="none">The Little Wedding Helper</span></div>
 	<div id="links">
  	 	<ul class="nav">
   		<li><a href="/lwh/wp">Home</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/services/">Services</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/category/gallery/">Gallery</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/press/">Press</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/contact/">Contact</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/testimonials/">Testimonials</a></li>
   		<li>&bull;</li>
   		<li><a href="/lwh/wp/links/">Links</a></li>
   		</ul>
  	</div>
</div>
   <div id="box" class="shadow"> 

<div id="content" class="wide">
    <h1 class="h1-border">Press</h1> 

  		<div class="grid-press">
			<a class="press" id="press1" href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/images/press1.jpg"></a>
			<h3>Perfect Wedding: Circus</h3>
		</div> 

		<div class="grid-press">
			<a class="press" id="press2" href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/images/press2.jpg"></a>
			<h3>Clifton Life Guide</h3>
		</div> 

		<div class="grid-press">
			<a class="press" id="press3" href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/images/press3.pdf"></a>
			<h3>Perfect Wedding:Venues</h3>
		</div> 

		<div class="grid-press">
			<a class="press" id="press4" href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/images/press4.pdf"></a>
			<h3>Perfect Wedding:Village Hall</h3>
		</div> 

		<div class="grid-press" style="margin-right:0px;">
			<a class="press" id="press5" href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/images/press5.jpg"></a>
			<h3>Perfect Wedding: Oscars</h3>
		</div> 

		<div class="grid-press">
			<a class="press" id="press6" href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/images/press6.jpg"></a>
			<h3>Perfect Wedding: Military Chic</h3>
		</div> 

		<div class="grid-press">
			<a class="press" id="press7" href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/images/press7.jpg"></a>
			<h3>Perfect Wedding: Eco Chic</h3>
		</div> 

		<div class="grid-press">
			<a class="press" id="press8" href="http://localhost:8888/lwh/wp/wp-content/themes/lwh/images/press8.pdf"></a>
			<h3>Perfect Wedding: Hot Topic</h3>
		</div> 

</div> 

</div> 

</div><div id="footer">
  <p>&copy;2010 The Little Wedding Helper &bull; <a href="mailto:hello@littleweddinghelper.co.uk">E-Mail</a> &bull; Site by <a href="http://www.jessicabiscoe.co.uk" title="Jessica Biscoe">Jessica Biscoe</a> &bull; Illustration by <a href="http://www.bmjt.co.uk">BMJT</a></p>
</div>
</body>
</html>

RavanH
Member
Posted 11 months ago #

Apart from the fact that you seem to be closing the <div id="header"> after the content div (right before <div id="footer">) the cause is the WP Galleria plugin. It loads its own outdated version of the jQuery library.

Please contact the developer(s) and ask them to include script files and stylesheets according to the official wp_enqueue_ method.
jhkb
Member
Posted 11 months ago #

Ah I see, thanks I'll try and contact them. When that plugin is deactivated it does the trick.

The chrome plugin for pdf's still seems to be overriding fancybox, but that isn't a massive issue. In firefox the overlay is working for the pdf's (and closing properly) but there's just a white box showing, no PDF. Is it likely this is the same issue?
RavanH
Member
Posted 11 months ago #

The Chrome browser uses its own plugin, I cannot change that. But it should still open the PDF in a FancyBox overlay. Also with FireFox: The PDFs should be displayed inside the overlay window same as they were opened directly.

Please take a look (in both browsers) on my Easy FancyBox Sandbox where you can find half way down the page two PDF links... If they do not open correctly inside an overlay window, your browser plugin/settings might be off.

Reply

You must log in to post.

WordPress.org

Forums

Easy FancyBox
PDF not working and overlay not closing. (12 posts)

Reply

About this Plugin

About this Topic

Tags

Code is Poetry

WordPress.org

Forums

Easy FancyBox PDF not working and overlay not closing. (12 posts)

Reply

About this Plugin

About this Topic

Tags

Code is Poetry

Easy FancyBox
PDF not working and overlay not closing. (12 posts)