Javascript slide show - how to impliment in Actinic

[The Baby Studio]

Hi,

Needed a slideshow so I downloaded a free Javascript tool, which created a couple of files and also a folder of supporting files. It runs fine in IE, but I don't know how to embed it into actinic.

The tool gives me this code

<div id="slideshow"></div>
<script language="javascript" src="slideshow.js"></script>

Which I put into a fragment, I also tried putting this slideshow.js, "filename".xlm and the associated folder it created into the Actinic designPrieviewhtml and added to the Additional Files in the Design tab in Actinic . But I just get the code displayed.

Am I close or should I leave it to an expert.

Thanks

D

[Duncan Rounding]

Try putting this in your fragment:

!!<
<div id="slideshow"></div>
<script language="javascript" src="slideshow.js"></script>
>!!

- also add the js file to additional files list.

You may have to manually upload the photos etc and the folders required to the expected locations.

[The Baby Studio]

Thanks Duncan,

I have I have seen that ommission before - kicking myself for not noticing. Thanks also for the advice on what to do with the files.

D

[graphicz]

Here's anothe one: I just called it A Slide Show (ass - sorry!)
The javascript is not my work, I am afraid the original source is lost.

Make a new fragment - 'ass fragment' in the design library, layouts, fragments:

<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22">
<a name="<actinic:variable name='FragmentAnchor' />"></a>
</actinic:block> 
<div style="height: 360px; width:580px;">
<div style="float:right; width:260px;">
<div>
<button type="button" id="back"><img src="back.jpg" alt="back" border="0"/></button>
<button type="button" id="stop"><img src="pause.jpg" alt="pause" border="0"/></button>
<button type="button" id="play"><img src="play.jpg" alt="play" border="0"/></button>
<button type="button" id="fwd"><img src="forward.jpg" alt="forward" border="0"/></button>
</div>
<div>
<h1 class="titletag"><actinic:variable name="FragmentTitle" /></h1>
<p class="titlepara"><actinic:variable name="FragmentText" /></p>
<actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentImageFileName%22%20%2f%3e%20%21%3d%20%22%22"><actinic:variable name="FragmentImage" />
<br />	
</actinic:block>
<p class="toptag"><actinic:variable name="HomePageTagLine" /></p>
</div>
</div>
<ul class="ppt">
	<li><div><a href="<actinic:variable name="Image01Link" />"><img src="<actinic:variable name="Image01" />" alt="Click to visit"></img></a></div><div class="capt"><a href="<actinic:variable name="Image01Link" />"><h2 class="caption"><actinic:variable name="Image01Title" /></h2></a></div></li>
	<li><div><a href="<actinic:variable name="Image02Link" />"><img src="<actinic:variable name="Image02" />" alt="Click to visit"></img></a></div><div class="capt"><a href="<actinic:variable name="Image02Link" />"><h2 class="caption"><actinic:variable name="Image02Title" /></h2></a></div></li>
	<li><div><a href="<actinic:variable name="Image03Link" />"><img src="<actinic:variable name="Image03" />" alt="Click to visit"></img></a></div><div class="capt"><a href="<actinic:variable name="Image03Link" />"><h2 class="caption"><actinic:variable name="Image03Title" /></h2></a></div></li>
	<li><div><a href="<actinic:variable name="Image04Link" />"><img src="<actinic:variable name="Image04" />" alt="Click to visit"></img></a></div><div class="capt"><a href="<actinic:variable name="Image04Link" />"><h2 class="caption"><actinic:variable name="Image04Title" /></h2></a></div></li>
	<li><div><a href="<actinic:variable name="Image05Link" />"><img src="<actinic:variable name="Image05" />" alt="Click to visit"></img></a></div><div class="capt"><a href="<actinic:variable name="Image05Link" />"><h2 class="caption"><actinic:variable name="Image05Title" /></h2></a></div></li>
	<li><div><a href="<actinic:variable name="Image06Link" />"><img src="<actinic:variable name="Image06" />" alt="Click to visit"></img></a></div><div class="capt"><a href="<actinic:variable name="Image06Link" />"><h2 class="caption"><actinic:variable name="Image06Title" /></h2></a></div></li>
</ul>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ass.js"></script>
</div>
<br clear="all" />

Make ass.js

$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();

var cur = $('.ppt li:first');
var interval;

$('#fwd').click( function() {
	goFwd();
	showPause();
} );

$('#back').click( function() {
	goBack();
	showPause();
} );

$('#stop').click( function() {
	stop();
	showPlay();
} );

$('#play').click( function() {
	start();
	showPause();
} );

function goFwd() {
	stop();
	forward();
	start();
}

function goBack() {
	stop();
	back();
	start();
}

function back() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'first' )
		cur = $('.ppt li:last');
	else
		cur = cur.prev();
	cur.fadeIn( 1000 );
}

function forward() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'last' )
		cur = $('.ppt li:first');
	else
		cur = cur.next();
	cur.fadeIn( 1000 );
}

function showPause() {
	$('#play').hide();
	$('#stop').show();
}

function showPlay() {
	$('#stop').hide();
	$('#play').show();
}

function start() {
	interval = setInterval( "forward()", 3000 );
}

function stop() {
	clearInterval( interval );
}

$(function() {
	start();
} );

The ( 1000) in

cur.fadeOut( 1000 );

and

cur.fadeIn( 1000 );

can be changed to vary the speed of dissolve.

The 3000 in

interval = setInterval( "forward()", 3000 );

can be changed to vary the time each image is displayed.

Make ass.css

ul.ppt {
	position: relative;
	margin: 10px 0 0 0;
	padding: 0;
	
}

.ppt li {
	list-style-type: none;
	position: absolute;
	top: -12px;
	left: 0;
}

.ppt img {
	border: 1px solid #e7e7e7;
	padding: 5px;
	background-color: #ececec;}
button {
border-size: 0px;
border-style: none;
background: none;
cursor: hand;
cursor: pointer;
padding: 0px;
}
button:hover {

}

.capt {
	background-color:#FFFFFF;
	filter:alpha(opacity=90);
}

and reference in the page head area.

<link rel="stylesheet" href="ass.css" type="text/css" />

Download jquery.min.js from the internet (Google) and save in the site folder.

Create the button images and save in the sie folder:
back.jpg
pause.jpg
play.jpg
forward.jpg

Make the respective variables in library variables and create a new group 'slideshow'.

<actinic:variable name="Image01" />
<actinic:variable name="Image01Link" />
<actinic:variable name="Image01Title" />

You can have as many as you like.

Also

<actinic:variable name="HomePageTagLine" />

if you wish.

This allows the site end user to change images and their respective titles and links to keep the slide show current. The links are h2 which is apparently good for seo.

One issue is that the ass.js throws up an error when on the same page as the reference to slimbox.js if used. I use the slide show on the home page so wrap a BlockIf around the slimbox reference thus:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e%20%3d%3d%20false">
		<script type="text/javascript" src="slimbox.js"></script>

</actinic:block>

You can see the slide show at http://www.graphicz.eu.com/site1/

You can play with the layout to make the images landscape and the buttons above.

Please advise and apologies for any ommissions.

[Duncan Rounding]

I generally use jalbum at http://jalbum.net/ which is free and easy to use. I create the slideshow and manually upload the files and then link it into a fragment with an iframe. You can see it in action here: http://www.sewinglines.co.uk/acatalo...e_UK_2010.html

And here's an older version of Banalbum (jalbum): http://www.sewinglines.co.uk/acatalo..._Showcase.html

[The Baby Studio]

I appreciate your effort in posting the reply Graphicz, but unfortunately its a bit too much for my level of knowledge. I can see that with a bit of effort on my part it could be very useful, but I have a slide show, just cant seem to put the files it creates in the right place.

Thanks again
D

[graphicz]

Any files in the site folder, when uploaded, Actinic will put in the acatalog folder. So, if the slideshow is on the home page your slideshow will be looking for www.blogs.co.uk/filename.whatever, whereas Actinic will have uploaded it to www.blogs.co.uk/acatalog/filename.whatever.

Either use full urls for the files (http://www.blogs.co.uk/acatalog/filename.whatever)
or manually ftp the files to the site root so they exist in the site root as well as acatalog.

I am not sure I have been very clear. Please can you post the code that isn't working? We will be able to see more clearly where issues might lie.

[EdHarrison]

I have tried a few of these never quite getting complete success, it would be nice to see slideshow codes built in to future releases of Actinic for the homepage and multiple product views. It does seem almost expected with modern sites.

[AdieB]

I looked for a good slideshow for a while and eventually bought one from www.monoslideshow.com It cost Eu25 and is well worth it as it is very customisable. There is no Javascript coding at all and all that needs be done is entering the images files in a XML file and uploading to your site. You need to add the script into your program but it is very easy. You can check it out atr www.servatech.co.za

[chapmachau]

I looked for a good slideshow for a while and eventually bought one from www.monoslideshow.com It cost Eu25 and is well worth it as it is very customisable. There is no Javascript coding at all and all that needs be done is entering the images files in a XML file and uploading to your site. You need to add the script into your program but it is very easy. You can check it out atr www.servatech.co.za

I'm new to actinic and have just downloaded the monoslidshow app.

i pasted the files into my site folder but am not sure where in actinic to paste the html code to embed the swf file, please can someone help me. thanks

[chapmachau]

downloaded monoslideshow and copied the files to my site folder. not sure how to embed or implement the html code into actinic. do i set a new variable or layout. Sorry to sound dumb, but am new to actinic : )

[Duncan Rounding]

According to the monoslideshow html help from here: http://www.monoslideshow.com/manual

place this in the Head of your layout:

<script type="text/javascript" src="swfobject.js"></script>

and this in a fragment:

!!<

<div id="flashContent">
<p>Please install Flash®</p>
</div>
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};
swfobject.embedSWF(
"monoslideshow.swf", "flashContent",
"480", "360", "10", false,
flashvars, params, attributes
);
</script>

>!!

Also add the .swf file and swfobject.js to the Additional Files List in Actinic.

Read the rest of the help for details about the structure of the xml file and where to put that.

[chapmachau]

Hi thanks for the help. I still cant make it work and think i must be missing something obvious. Sorry still learning.

Did what you suggested but when I preview the site in my browser, the area where the slideshow should play is just blank. When I right clicked it says "movie not loaded"

In the main "site" folder I put the files "monoslideshow.swf and swfobject.js".
Is that the right place as you mentioned adding them to the "additional files list" in Actinic or is there something in actinic I should do to import or reference them?

In the slideshow folder I put the files "monoslideshow.xml and the "album" folder containing the images.

The monoslideshow.xml file reads as follows:

<?xml version="1.0" encoding="utf-8"?>
<!--
Monoslideshow 2.0 configuration file
Please visit http://www.monoslideshow.com for more info
-->
<album thumbnail="album/albumThumbnail.jpg" itemPath="album/images" thumbnailPath="album/thumbnails">
<configuration>
<transition kenBurnsMode="randomZoomIn" />
</configuration>
<contents>
<image source="photo1.jpg" title="title 1" description="description 1" />
<image source="photo2.jpg" title="title 2" description="description 2" />
<image source="photo3.jpg" title="title 3" description="description 3" />
</contents>
</album>


The layout code I put into the fragment in actinic reads as follows:

<div id="flashContent">
<p>Please install Flash®</p>
</div>
<script type="text/javascript">
var flashvars = {dataFile: "slideshow/monoslideshow.xml"};
var params = {};
var attributes = {};
swfobject.embedSWF("monoslideshow.swf", "flashContent","480", "360", "10", false,flashvars, params, attributes);
</script>



Thanks very much for your help, it is much appreciated.

[leehack]

Design > additional files is where to add them.

[chapmachau]

thanks Lee,

I added the following files into actinic.

monoslideshow.swf
swfobject.js
slideshow/monoslideshow.xml


Previewed it in the browser but it is still blank.

Any ideas, thanks

Steve