Rotating show images in Patron Edge Online
My colleague, Matt Cook, recently showed off a cool Image cube he put together for Patron Edge Online. Take a look at the information below, it would be cool to see this put to work. The really cool thing about this is that each side of the cube can link to different things, so this could help drive interest in things like special events, classes, or whatever the creative minds in your marketing department can think up! As the cube is set up right now, it uses the loader.asp file to allow it to link directly to specific shows. Pretty cool!
Disclaimer: This will require you to do a small amount of coding. The example is pretty easy to follow if you are familiar with HTML, Javascript or other coding languages, but you won’t be able to contact support for assistance setting this up.
1. Create a new screen part on the page where you want the image to display (In this example, I’ll use Template 1)
· Type = Include
· File Name = imagecube.html
· Top, Left, Width, Height – position the element as desired, but you want it to be the size of your images for best resolution. I used 450,20,120,80
2. Grab the latest copy of the image cube library Note: There are literally thousands of cool jquery libraries out there, many of them dealing with images, this is just one that looked slick to me. Most are easy to use and would be interchangeable. Unzip the library into your PEOSite folder (by default, C:\Program Files\Blackbaud\The Patron Edge Online\PEOSite)
3. Open up your favorite text editor, create imagecube.html and drop it in your PEOSite folder
Here’s the code for my file:
<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagecube.js"></script>
</head>
<div id="defaultCube" style="width: 120px; height: 80px; overflow: none;">
<a href="loader.asp?target=show.asp?shCode=64"><img src="images/shows/show64.jpg" alt="Show 64 Title" title="Show 64 Title" style="width: 100%; height=100%;"/></a>
<a href="loader.asp?target=show.asp?shCode=38"><img src="images/shows/show38.jpg" alt="Show 38 Title" title="Show 38 Title" style="width: 100%; height=100%;"/></a>
<a href="loader.asp?target=show.asp?shCode=19"><img src="images/shows/show19.jpg" alt="Show 19 Title" title="Show 19 Title" style="width: 100%; height=100%;"/></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.imagecube.setDefaults({speed: 1000, pause: 6000});
$('#defaultCube').imagecube();
});
</script>
You’ll need to make a few changes.
Namely, I referenced show codes in my sample database.
You can generate your
loader link as needed.
Your images will also likely not be named show64, so update the img src reference as well as the alt and Title as needed.
There are a lot of benefits to using
Google’s jQuery library, but you can download your own if needed.
Try it out and leave a comment if this worked for you!