Featured listings jQuery powered fading slideshow with captions
What does it do?
It shows your featured listings as a nice fading slideshow, with a semi-translucent panel popping up from the bottom (or the top as you prefer) with the title of the listing and anything else you require. It looks pretty, and it validates.
How does it do that?
It outputs the featured listings as a nice unordered list which is then promptly hidden by css. Then css is then manipulated with javascript to display the pictures and captions one at a time. Using the power of the jQuery library to fade them in and out, and to animate the captions.
Is it easy to use?
It is now. There are "manual" instructions over here: http://support.open-realty.org/showthread.php?t=20788 where the idea originated, but they were a little "hands on". This addon approach is completely simple and just requires the user to upload the addon, put the included "featured_listing_s3Slider.html" file into their template directory and insert the tag {addon_s3Slider_show} where they want the show.
Who made it?
I came up with the idea, but Albert (awddesign) thought to use pbflash's addon code (for multiple featured listings) to turn it into an addon. I couldn't do it... but Eduardo (ebmarques) stepped in to write the addon code. The javascript was written by someone else too! (credits in the script) so it was certainly a team effort
How do I use it exactly?
Here's the install file that comes with it! :
###########s3Slider ADD-ON v.1.1 ###############
#. What is this Addon:
----------------------
This makes a nice fading slideshow, with a semi-translucent panel popping up
from the bottom (or the top as you prefer) with the title of the listing and
anything else you require.
This Addon was tested with a clean installation of Open-Realty version 2.5.6
#. Installation:
----------------
Unpack the file s3Slider.zip inside your addon directory - it will create a new
directory named "s3Slider" with the following dirs/files:
/addons/s3Slider/
addon.inc.php
featured_listing_s3Slider.html (copy this file to your site template folder)
index.php (blank file to stop directory browsing)
install.txt (this text)
/addons/s3Slider/css/
s3Slider_addon.css
/addons/s3Slider/js/
jquery.min.js
s3Slider.js
#. How to use this Addon:
------------------------
To see the Addon in action at frontend (there is nothing set for the backend!), you will need to add the tag {addon_s3Slider_show} where you wish at your main HTML template file (main.html for example).
Copy the "featured_listing_s3Slider.html" file to your template folder as the add-on is going to look for this file. That's all.
#. Unninstall:
--------------
- delete all content of the directory "s3Slider"
How could I make it better?
Well, you could figure out how to turn every uploaded image into three images - a thumb, a mid-size and a full-size. Then we wouldn't have to resize these images using css...which is a bit naughty. Or of course you could just alter the size of the slide show (all easily done in the css file that comes with it) to match your current thumbnail size. Whatever you like. Have fun!
Bookmarks