Anyone Intergrated Shadowbox Successfully ?

[eck247]

Hi All,

Having problems integrating Shadowbox , lightbox was no prob but when i install shadowbox its as if it cant find the flv or graphic files ?

Eck247

[malbro]

Hi All,

Having problems integrating Shadowbox , lightbox was no prob but when i install shadowbox its as if it cant find the flv or graphic files ?

Eck247

It is a bit difficult to help without more details but shadowbox examples use a sub folder 'gallery' if you are doing the same then it may simply be that the paths are wrong for preview and web preview.

Take a look in the html source of web preview to see where the page is looking for the files.

enclosed snapshots of shadowbox in Actinic V10

[Romerz]

Is there a simple method for integrating either lightbox or shadowbox into actinic? The thread on the subject goes off on so many tangents with outdated information - its a bit strange to try and follow.

[Romerz]

Can I assume this is a no then?

[Chunkford]

Is there a simple method for integrating either lightbox or shadowbox into actinic? The thread on the subject goes off on so many tangents with outdated information - its a bit strange to try and follow.

Look into Normans lightbox add-on - http://www.drillpine.biz/actinicstuff/index.html
Can't get more simpler than that

[malbro]

Can I assume this is a no then?

It is very easy to integrate the shadowbox or the slimbox but you will need some understanding of Actinic layouts.

[malbro]

To install the shadowbox plugin

1/ insert this code in the head section.

	<!-- the following line is only required to run the demos -->
	<script type="text/javascript" src="demo.js"></script>
	<link rel="stylesheet" type="text/css" href="shadowbox.css">
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="shadowbox.js"></script>
	<script type="text/javascript">
	Shadowbox.init({
		 // a darker overlay looks better on this particular site
		 overlayOpacity: 0.8
		 // setupDemos is defined in demo.js
	}, setupDemos);
	</script>

2/ add this code into the product layout

	<div> 
		<h2><a name="examples">Examples</a></h2>
		<p>The simplest way to use Shadowbox is to display a single piece of content, with a thumbnail link on the page. When the user clicks on the thumbnail, Shadowbox will open to display a larger version of the image.</p>
		<table class="thumbs" border="0" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td><a rel="shadowbox" href="tiger.jpg"><img alt="Tiger" class="border" src="tiger-thumb.jpg"></a></td>
					<td><a rel="shadowbox" href="colours.jpg"><img alt="Colours" class="border" src="colours-thumb.jpg"></a></td>
				</tr>
			</tbody>
		</table>
	</div>

that is all you need to do to get shadow box into actinic, see http://www.actinic-beta.toddesigns.c...g/Cameras.html to see this in action on a V10 demo site.

This is just a simple demo, to make it useful you will need to decide how you want to display images and make use of the code in part 2 in the product layout using Actinic Variables to control which images are used.

for example you could use an Attribute and Choices to determine a series of small thumbnails, one for each choice and have a larger picture associated with them. You would need to generate two custom variables for the choice to allow you to set the filename for the Thumbnail and the Large Picture, then modify the choice list layout code to produce the line

 <a rel="shadowbox" href="Thumbnail"><img alt="BigPicture" class="border" src="tiger-thumb.jpg"></a>

where Thumbnail and BigPicture are the custom actinic variables for each choice.

[malbro]

If you just wanted this on one product then you could use the code in item 2 of previous post placed in the product layout and change the image names to suit. In other words hard coded.

Now this will display on every product so you create a new variable 'DisplayShadowBox, define it as True/False with global value of False and place it in the Layout.

now insert the code inside a blockif and for the product where you want it simply goto the layout tab and set the value for DisplayShadowBox to true. The demosite is setup this way.

<actinic:block if="%3cactinic%3avariable%20name%3d%22DisplayShadowbox%22%20%2f%3e%3d%3dtrue">
		<div> 
		<h2><a name="examples">Examples</a></h2>
		<p>The simplest way to use Shadowbox is to display a single piece of content, with a thumbnail link on the page. When the user clicks on the thumbnail, Shadowbox will open to display a larger version of the image.</p>
		<table class="thumbs" border="0" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td><a rel="shadowbox" href="tiger.jpg"><img alt="Tiger" class="border" src="tiger-thumb.jpg"></a></td>
					<td><a rel="shadowbox" href="colours.jpg"><img alt="Colours" class="border" src="colours-thumb.jpg"></a></td>
				</tr>
			</tbody>
		</table>
	</div>
</actinic:block>