Magento WordPress Integration Magento WordPress Integration

Adding a Lightbox to Your Blog Images

From version 4.0.0.0, Magento WordPress Integration comes with it's own Lightbox feature. This can be used without installing any additional plugins in WordPress and consists of a single JS file that can be found at the following location:

js/fishpig/wordpress/lightbox.js

If have Magento WordPress Integration 4.0 or higher and the lightbox isn't working, you may not have the lightbox.js file included. This can happen when you have an old version of wordpress.xml in your custom theme's layout directory. To resolve this, either rename the wordpress.xml file in your custom theme's layout directory to wordpress.xml.old or add the following to the file:

<wordpress_default>
	<reference name="head">
		<action method="addJs"><script>fishpig/wordpress/lightbox.js</script></action>
	</reference>
</wordpress_default>

If the lightbox still isn't working properly, you may not have the required CSS in place to make it display. To fix this, first check that the CSS file that comes packaged with the extension is included (System > Configuration > WordPress > Misc > Stylesheet). Next, check that this file contains the following code:

#fp-gallery { 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
	z-index: 100;
}

#fp-gallery .shadow { 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	background: #000 url('ajax-loader.gif') no-repeat center 40px;
}

#fp-gallery .inner { 
	position: relative;
	z-index: 102;
	background: #fff;
	max-width: 95%;
	margin: 1% auto 0;
	background: #fff;
	border: 4px solid #ddd;
	box-shadow: 4px 4px 4px #666;
	display: inline-block;
	min-width: 400px;
	min-height: 200px;
}

#fp-gallery .close {
		display: inline-block;
		position: absolute;
		background: #fff url('lightbox-close.png') no-repeat center center;
		padding: 2px;
		border-radius: 50%;
		cursor: pointer;
		text-decoration: none;
		display: inline-block;
		height: 48px;
		width: 48px;
		margin: auto;
		top: 10px;
		right: 10px;
		text-indent: -999999px;
}
Post your comment

FishPig Ltd