Table of contents
- 1. Demo
This started out of a request for a visually-appealing way to slide pictures through a frame, and not just have them fade out or in. In addition, we wanted the ability to click on individual pictures as the scrolled to the front and have them link to specific pages. While this extension in its current format is very purpose-specific, it'd be very easy to make it more generically usable. I plan to do that in the future, but for now I figured I would show you how it's done.
Demo
Much thanks to Niall Doherty and his CodaSlider plugin for jQuery that makes this work. Hopefully with this tutorial, you can see how easy it is to incorporate javascript plugins and other packages into extensions for Deki.
First, I started with the standard Dekiscript extension XML data:
<extension> <title>codaslider</title> <namespace>codaslider_thumbs</namespace> <function> <name>ten</name> <description>Coda Slider</description>
Note that the name is "ten"; this extension (being single-purpose) will only work for 10 pictures. It'd be simple to add additional names to this extension to handle more or less pictures.
Next, we need to get the location (URI) of both the images and thumbnails, the text that scrolls with the pictures, as well as the landing page that the user is directed to when a particular picture is clicked on.
<param name="image1Uri" type="uri">Image 1 URI</param> <param name="image1thumb" type="uri">Image 1 Thumbnail URI</param> <param name="image1txt" type="str">Image 1 Text</param> <param name="image1LandingPage" type="uri">Image 1 Landing Page URI</param> <param name="image2Uri" type="uri">Image 2 URI</param> <param name="image2thumb" type="uri">Image 2 Thumbnail URI</param> <param name="image2txt" type="str">Image 2 Text</param> <param name="image2LandingPage" type="uri">Image 2 Landing Page URI</param> <param name="image3Uri" type="uri">Image 3 URI</param> <param name="image3thumb" type="uri">Image 3 Thumbnail URI</param> <param name="image3txt" type="str">Image 3 Text</param> <param name="image3LandingPage" type="uri">Image 3 Landing Page URI</param> <param name="image4Uri" type="uri">Image 4 URI</param> <param name="image4thumb" type="uri">Image 4 Thumbnail URI</param> <param name="image4txt" type="str">Image 4 Text</param> <param name="image4LandingPage" type="uri">Image 4 Landing Page URI</param> <param name="image5Uri" type="uri">Image 5 URI</param> <param name="image5thumb" type="uri">Image 5 Thumbnail URI</param> <param name="image5txt" type="str">Image 5 Text</param> <param name="image5LandingPage" type="uri">Image 5 Landing Page URI</param> <param name="image6Uri" type="uri">Image 6 URI</param> <param name="image6thumb" type="uri">Image 6 Thumbnail URI</param> <param name="image6txt" type="str">Image 6 Text</param> <param name="image6LandingPage" type="uri">Image 6 Landing Page URI</param> <param name="image7Uri" type="uri">Image 7 URI</param> <param name="image7thumb" type="uri">Image 7 Thumbnail URI</param> <param name="image7txt" type="str">Image 7 Text</param> <param name="image7LandingPage" type="uri">Image 7 Landing Page URI</param> <param name="image8Uri" type="uri">Image 8 URI</param> <param name="image8thumb" type="uri">Image 8 Thumbnail URI</param> <param name="image8txt" type="str">Image 8 Text</param> <param name="image8LandingPage" type="uri">Image 8 Landing Page URI</param> <param name="image9Uri" type="uri">Image 9 URI</param> <param name="image9thumb" type="uri">Image 9 Thumbnail URI</param> <param name="image9txt" type="str">Image 9 Text</param> <param name="image9LandingPage" type="uri">Image 9 Landing Page URI</param> <param name="image10Uri" type="uri">Image 10 URI</param> <param name="image10thumb" type="uri">Image 10 Thumbnail URI</param> <param name="image10txt" type="str">Image 10 Text</param> <param name="image10LandingPage" type="uri">Image 10 Landing Page URI</param>
Again, there are 10 pictures, with 4 parameters per picture. If you were to do more or less, you'd obviously just include or remove the appropriate parameter sets.
After that, a little more of the requisite extension information.
<return> <html xmlns:eval="http://mindtouch.com/2007/dekiscript"> <head>
In order to make it look as pretty as it is, this extension needed a little bit of CSS magic (courtesy of IreneV, thanks!). We had noticed that the external link indicator followed the photos above the panels (visually undesirable), and there were some other elements needed to blend the slider nicely into the page. The CSS file we used for this is attached to the bottom of the page, but feel free to edit it or use it as a starting point to create your own to match your particular Deki installation.
Also in this code block are the javascript references that do the heavy lifting. If you're copying and pasting, be sure to have the codaslide.css file link pointing at your locally-available copy of it.
<link rel="stylesheet" type="text/css" media="screen" href="http://169.234.16.89/@api/deki/files/1081/=codaslide.css"/> <script type="text/javascript" src="http://www.mindtouch.com/s/includes/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://www.mindtouch.com/s/includes/jquery-easing-1.3.pack.js"></script> <script type="text/javascript" src="http://www.mindtouch.com/s/includes/jquery-easing-compatibility.1.2.pack.js"></script> <script type="text/javascript" src="http://www.mindtouch.com/s/includes/coda-slider.1.1.1.pack.js"></script>
The pictures are scrolled to or through in two different ways. First, we want the pictures to scroll by every X number of seconds (in this case, 5.5 seconds, or 5500 milliseconds.). However, if user wants to view a particular picture, we want them to be able to click on the thumbnail and have the slider scroll to the appropriate picture. It is important to note here the hard-coded number "10" line 21. This number needs to be the same as the number of pictures you are going to have scrolling; it's how the slider knows that it's reached the last picture in the slider row and return to the first picture (curclick=0). If this number differs from the number of pictures you're scrolling, you'll either end not seeing all of the pictures or end up with some confused javascript in your panel.
Big thanks to Chris Coyier for the onclick scripting.
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 10 == curclicked )
curclicked = 0;
}, 5500);
};
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
</script>
Now it's time to start using those parameters we defined above. First we denote the classes for the CSS and javascript to utilize, and then drop in the parameters using the "eval" wrappers. Lastly, the panel itself is wrapped by the landing pages link, so that when the user clicks on this particular panel they are taken to the designated landing page.
Note that we are hard-coding the picture size here to match the pictures we are using; pictures with different dimensions will automatically resize to this dimension and could possibly result in distortion or pixellation. If you wanted to have a panel with different dimensions, you would change it in this block, but keep in mind that changes here would require changes in the CSS as well. It would be easy enough to make those dimensions into optional parameters that could be requested in order to determine the panel size at page load, but again since this extension was single-purpose that hasn't been implemented. Yet.
This is the code for the just first panel.
</head>
<body>
<div id="page-wrap">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<a eval:href="args.image1LandingPage">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img eval:src="args.image1Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>args.image1txt</eval:expr></span>
</div>
</div>
</div>
</a>
Here's the code for the entire 10 pictures. I'd also like to point out for demonstration purposes that in the first panel, I use "args.image1txt" in line 17, but in the rest of the blocks I used "$image2txt". The "args." and "$" are interchangeable with recent versions of Deki.
</head>
<body>
<div id="page-wrap">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<a eval:href="args.image1LandingPage">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img eval:src="args.image1Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>args.image1txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image2LandingPage">
<div class="panel" title="Panel 2">
<div class="wrapper">
<img eval:src="args.image2Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image2txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image3LandingPage">
<div class="panel" title="Panel 3">
<div class="wrapper">
<img eval:src="args.image3Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image3txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image4LandingPage">
<div class="panel" title="Panel 4">
<div class="wrapper">
<img eval:src="args.image4Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image4txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image5LandingPage">
<div class="panel" title="Panel 5">
<div class="wrapper">
<img eval:src="args.image5Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image5txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image6LandingPage">
<div class="panel" title="Panel 6">
<div class="wrapper">
<img eval:src="args.image6Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image6txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image7LandingPage">
<div class="panel" title="Panel 7">
<div class="wrapper">
<img eval:src="args.image7Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image7txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image8LandingPage">
<div class="panel" title="Panel 8">
<div class="wrapper">
<img eval:src="args.image8Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image8txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image9LandingPage">
<div class="panel" title="Panel 9">
<div class="wrapper">
<img eval:src="args.image9Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image9txt</eval:expr></span>
</div>
</div>
</div>
</a>
<a eval:href="args.image10LandingPage">
<div class="panel" title="Panel 10">
<div class="wrapper">
<img eval:src="args.image10Uri" width="600" height="220" />
<div class="photo-meta-data">
<span><eval:expr>$image10txt</eval:expr></span>
</div>
</div>
</div>
</a>
</div>
</div>
Lastly, we need to set up the row of thumbnails. First we define the ID, and then use "eval" to get the image thumbnails. You can see here that the wizardry really happens with the CSS... as the onlick event is triggered either through the timer or via the user, the "active-thumb" class is removed by the javascript from the current thumbnail and applied to the next one. The border moves to the next (or selected) thumbnail. Also, since the thumbnails are links, on a user-generated click event the slider will slide the appropriate picture in the main panel.
At the bottom is the rest of the requisite Dekiscript information to close out the extension.
<div id="movers-row">
<div><a href="#1" class="cross-link active-thumb"><img eval:src="$image1thumb" class="nav-thumb" /></a></div>
<div><a href="#2" class="cross-link"><img eval:src="$image2thumb" class="nav-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img eval:src="$image3thumb" class="nav-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img eval:src="$image4thumb" class="nav-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img eval:src="$image5thumb" class="nav-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img eval:src="$image6thumb" class="nav-thumb" /></a></div>
<div><a href="#7" class="cross-link"><img eval:src="$image7thumb" class="nav-thumb" /></a></div>
<div><a href="#8" class="cross-link"><img eval:src="$image8thumb" class="nav-thumb" /></a></div>
<div><a href="#9" class="cross-link"><img eval:src="$image9thumb" class="nav-thumb" /></a></div>
<div><a href="#10" class="cross-link"><img eval:src="$image10thumb" class="nav-thumb" /></a></div>
</div>
</div>
</div>
</body>
<tail></tail>
</html>
</return>
</function>
</extension>
As you can see, this extension is pretty straightforward and is not complex, yet it's visually high-impact (this took me probably two or three hours, plus Irene's time for the CSS). Using XML to create your own extensions is fairly easy to do but can still provide a rather fantastic result. Hopefully you enjoyed reading about how this was done!
- Was this page helpful?
- Tag page
- What links here
Files 6
| File | Version | Size | Modified | |
|---|---|---|---|---|
| ||||
| ||||
| ||||
| ||||
| ||||
| ||||
| Images 0 | ||
|---|---|---|
| No images to display in the gallery. |
Copyright © 2011 MindTouch, Inc. Powered by