You can view Pixedelic's support/download page here:
I wanted to load this plugin into a simple ToolBook application using PowerPac's XML engine.
- Here is my result using a slideshow of over 300 pics categorized into about 11 groups. Each group can be selected from a comboBox which is automatically configured by the XML.
http://www.pgsoftwaretools.com/belgium
- Absolutely no modifications were made to the jQuery plugin from Pixedelic.
- A separate XML file was used for each category of pics.
- The ToolBook page is completely configured by loading jQuery and the plugin in the <config> ... </config> section of the XML. When the last js file is loaded the XML sends a user event to ToolBook to begin the slideshow.
- I had to write a little js file (called "bridge.js") to add tbfunction_startSlideShow() so the Actions Editor could run the show in response to category selection in the comboBox. The "bridge.js" also responds to the callback features of Pixedelic's jQuery plugin to send user events back to the ToolBook page.
- The page layout was a simple container format: (There are only 7 objects on this page! Make the app load very fast.)
- ToolBook page layout
- Image 1.png (59.14 KiB) Viewed 4635 times
Notice there was support for audio playback. If the loaded collection of pictures includes an "audio" attribute in the picture list, then the bridge.js send a user even to the ToolBook audio playback icon to show the icon. The audio file to play was represented by the value of the "audio" attribute in the loaded collection (e.g.: audio="../audio/walkon.mp3").
Only a single field was used for captions as we just read in the caption from the loaded XML file just before the caption is displayed.
To be a little more fancy, I used PowerPac's pgAnimateCSS() function to randomly animate the appearance of the caption text. The random list to pick from was included in the XML file for the collection. The field height was set to "auto" so it always resized itself no matter how long or show the caption text was.
- Here is the bridge.js file code:
- Code: Select all
// JavaScript document
function tbfunction_cameraSlideStart( tbName, timing, slideCt ) {
var tbF = getToolBookFrame(), pObj = gTBo(tbName, 'objRef'),
camera_id = pObj.firstChild.id, xF, tid, pg = currentPage; //Store currentPage in case of force navigation to another collection
if (typeof tbF.$('#' + camera_id).camera != 'function') {
xF = function() {
tbfunction_cameraSlideStart(tbName, timing, slideCt);
};
return setTimeout(xF, 100);
} else {
try {
tbF.$('#' + camera_id).cameraStop();
} catch(e) {
//Gracefully fail if the slideshow has not been initialized on tbName
}
}
tbF.$( '#' + camera_id ).camera( {
height : (pObj.offsetHeight - 49) + "px",
thumbnails : true,
time : timing, //Defaults to 7000
imagePath : '../camera_plugin/images/',
onStartTransition : function() {
if (!!tid) {
clearTimeout(tid);
tid = 0;
//Stop any waiting user event by sending dummy event
tbfunction_pgTBObjSet("collections", "user", "skip", 0, false, true);
}
tbfunction_pgTBObjSet('myAudio', 'user', 'audio,end,pageNav'); //Force audio end on next slide
//Clear caption until next slide is completely visible
tbfunction_pgTBObjSet("camera_captions", "text", "");
},
onEndTransition : function() {
//Each transition will send user event with value = [tbName],[slide #]
var t = tbF.$('#' + camera_id),
x = tbF.$('.cameraSlide.cameracurrent').index() + 1, //Setting one-based result because pic index of plugin will start at 0
chk = (pg == currentPage), tmp;
tmp = tbF.document.getElementById('slide_' + x).getAttribute('audio');
tbfunction_pgTBObjSet('play_audio', 'visible', !!tmp);
if (!!tmp) {
t.cameraPause();
pObj.audio = tmp;
} else {
tbfunction_pgTBObjSet('Audio Player', 'visible', false);
try {
t.cameraResume();
} catch(e) {
//Gracefully fail
}
}
if (chk) tbfunction_pgTBObjSet(tbName, "user", tbName + "," + x);
if (x >= slideCt) {
if (!chk) {
t.cameraStop();
if (!!tid) clearTimeout(tid);
tid = 0;
return;
}
tid = setTimeout( function() {
t.cameraStop();
//Wait another few seconds before starting new show
tbfunction_pgTBObjSet("collections", "user", "loadNext", 3000, false, true);
}, timing - 200);
}
}
} );
tbfunction_pgStyleObject(tbName, "visibility", "visible", 250);
};
I initially tried to put this code in the XML file and run it using exeJavascriptDirect(). However, in the long run it was a little buggy and too complex for that usage. So we went with a separate js file and loaded into the ToolBook from using the Menu > Object > Book properties > web tab > import item.
Also notice in the "bridge.js" code that we are making several PowerPac function calls. This shows how to use the PowerPac functions inside your own js files.
- Here is the XML file for a typical collection of pics:
- Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<page>
<config>
<stylesheet>
../styles/slideshow.css
</stylesheet>
<!--Load camera plugin files-->
<stylesheet>
../camera_plugin/css/camera.css
</stylesheet>
<!--jQuery v1.11.3-->
<pgExtFiles>
<![CDATA[
{ file_url : "../camera_plugin/scripts/jquery.min.js",
opt : "load",
special : false,
loadAsScript : true }
]]>
</pgExtFiles>
<pgExtFiles>
<![CDATA[
{ file_url : "../camera_plugin/scripts/jquery.mobile.customized.min.js",
opt : "load",
special : false,
loadAsScript : true }
]]>
</pgExtFiles>
<pgExtFiles>
<![CDATA[
{ file_url : "../camera_plugin/scripts/jquery.easing.1.3.min.js",
opt : "load",
special : false,
loadAsScript : true,
unloadScriptDelay : "none" }
]]>
</pgExtFiles>
<!--Last dependency sends user event to "camera_plugin" field to validate loading slideshow-->
<pgExtFiles>
<![CDATA[
{ file_url : "../camera_plugin/scripts/camera.min.js",
opt : "load",
special : false,
loadAsScript : true,
unloadScriptDelay : "none",
notifyOnLoad : "camera_plugin" }
]]>
</pgExtFiles>
<!--END of Camera plugin loading-->
</config>
<slide_bg>
<!--Applies background styling to background element-->
<pgStyleObject>
<![CDATA[
{ theStyle : "borderRadius, boxShadow",
propVal : "36px, 0px 0px 36px 18px #202020 inset" }
]]>
</pgStyleObject>
</slide_bg>
<pgTitle>
<pgStyleObject>
<![CDATA[
{ theStyle : "fontFamily, fontSize, fontWeight, fontStyle, whiteSpace, width",
propVal : "Verdana, 26pt, bold, italic, nowrap, auto" }
]]>
</pgStyleObject>
<htmlText>
<![CDATA[
<span class="title_glow">2015 Special Convention — Gent Belgium </span>
]]>
</htmlText>
</pgTitle>
<camera_plugin timing="5500" slideCt="11" name="Gifts">
<!--jQuery and the camera slideshow will use the html elements in this field
set timing attribute in main tag of this section to set the ms for each slide-->
<htmlText>
<![CDATA[
<div class="camera_wrap" id="camera_wrap_1">
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_001.jpg"
data-src="../camera_plugin/images/slides/gifts_001.jpg"
data-portrait="true" data-fx="scrollLeft"
data-time="6800"
id="slide_1">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_002.jpg"
data-src="../camera_plugin/images/slides/gifts_002.jpg"
data-time="7500"
id="slide_2">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_003.jpg"
data-src="../camera_plugin/images/slides/gifts_003.jpg"
id="slide_3">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_004.jpg"
data-src="../camera_plugin/images/slides/gifts_004.jpg"
id="slide_4">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_005.jpg"
data-src="../camera_plugin/images/slides/gifts_005.jpg"
id="slide_5">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_006.jpg"
data-src="../camera_plugin/images/slides/gifts_006.jpg"
id="slide_6">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_007.jpg"
data-src="../camera_plugin/images/slides/gifts_007.jpg"
id="slide_7">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_008.jpg"
data-src="../camera_plugin/images/slides/gifts_008.jpg"
id="slide_8">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_009.jpg"
data-src="../camera_plugin/images/slides/gifts_009.jpg"
id="slide_9">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_010.jpg"
data-src="../camera_plugin/images/slides/gifts_010.jpg"
id="slide_10">
</div>
<div data-thumb="../camera_plugin/images/slides/thumbs/gifts_011.jpg"
data-src="../camera_plugin/images/slides/gifts_011.jpg"
id="slide_11">
</div>
</div>
]]>
</htmlText>
<pgStyleObject>
<![CDATA[
{ theStyle : "visibility, boxShadow, overflow",
propVal : "hidden, 8px 8px 10px 2px #333333, visible" }
]]>
</pgStyleObject>
<!--Sets gradient background which shows through when viewing a portrait image-->
<userProperty>
<![CDATA[
{ prop : "className",
val : "my_gradient",
get_set : "set" }
]]>
</userProperty>
</camera_plugin>
<camera_captions>
<!--Group properties and styling-->
<pgTBObjSet>
<![CDATA[
{ myProperty : "visibility",
myValue : false }
]]>
</pgTBObjSet>
<pgStyleObject>
<![CDATA[
{ theStyle : "height, lineHeight, fontFamily, fontSize, fontWeight",
propVal : "auto, 1.30em, Verdana, 20pt, bold" }
]]>
</pgStyleObject>
<!--Captions are set in next tags ... may use HTML tags-->
<cap_1>
<![CDATA[
Gifts exchanged at the convention showed a gracious and loving spirit.<br><br>
Ann made these handkerchiefs among other things to give away as gifts.
]]>
</cap_1>
<cap_2>
<![CDATA[
Even Brussels Bethel gave gift bags to us.<br><br>
These gifts were among them.<br><br>
The fans came in handy as temps reached 90° with no air conditioning.
]]>
</cap_2>
<cap_3>
<![CDATA[
We received much more than we brought to the convention!
]]>
</cap_3>
<cap_4>
<![CDATA[
A closer look . . .
]]>
</cap_4>
<cap_5>
<![CDATA[
]]>
</cap_5>
<cap_6>
<![CDATA[
Notice the beer!<br><br>
Elderly ones knitted many gifts.<br><br>
There is even a Belgium waffle.
]]>
</cap_6>
<cap_7>
<![CDATA[
Many items were labeled with the convention date.
]]>
</cap_7>
<cap_8>
<![CDATA[
Most gifts were given with email addresses to keep in touch.
]]>
</cap_8>
<cap_9>
<![CDATA[
Lots of Belgium chocolates were included!
]]>
</cap_9>
<cap_10>
<![CDATA[
Plenty of JW.ORG pins, buttons, key rings<br><br>
... and even a beer bottle opener.
]]>
</cap_10>
<cap_11>
<![CDATA[
We had a hard time fitting all of this in our luggage.
]]>
</cap_11>
</camera_captions>
<cap_transitions>
expandOpen,bounceIn,expandUp,flipInX,flipInY,pullDown,rollIn,slideDown,zoomInRight,zoomInDown,zoomInUp
</cap_transitions>
<!--Set total number of collections-->
<collections>
<buildComboBoxOptionsList>
<![CDATA[
{ optionsList : "Travel\n
Field Service\n
Antwerp Tour\n
Gent Tour\n
Social Gatherings\n
Convention\n
People\n
Gifts\n
Brussels City\n
Brussels Bethel\n
London Bethel\n
London City Tour",
appendList : false,
topItem : false,
sortList : false,
multiSelect : false }
]]>
</buildComboBoxOptionsList>
<pgStyleObject>
<![CDATA[
{ theStyle : "height, fontWeight, color",
propVal : "auto, bold, #785CBE" }
]]>
</pgStyleObject>
</collections>
</page>
- Finally, we created folder for the Pixedelic camera files and added all my pics to the images folder of the Pixedelic folder included thumb nail duplicates. Also created a folder for audio files. Then we flagged these folders for inclusion in the ToolBook export.
- One problem: The Pixedelic can be a little buggy but most of these anomalies can be worked around without too much trouble.
In addition, the author did not provide an unload camera feature. To get around this I duplicated my ToolBook page to load the next category of pics. This forces any previous Pixedelic camera slideshow to unload all its event listeners and variables so we can load a new picture category fresh from the next XML file based on the selection in the comboBox. We put most objects on the background so editing the file only required making sure the slideshow container field itself was duplicated on the second page. Everything else was just common background objects.
If you would like assistance with this or other jQuery plugins with XML support, feel free to contact me ([email protected]) to discuss ... or you may choose to put a topic in this area of the forum for group discussion. We are all likely to benefit from the ingenuity of users of the XML features of the PowerPac along with other third-party products.