zarathustra
03-14-2009, 12:46 PM
I've seen various threads asking for it, and not many answering, and I just had to implement one myself, so I thought I could share the code. 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. It requires no core changes and no addons.
The code is very much "made for my own project", but should be easy to adapt to your requirements.
I used the s3Slider jQuery plugin,, I only modified the CSS a little, not the script, so feel free to get the compressed version (1.6k!) from here:
http://www.serie3.info/s3slider/index.php
Instructions follow:
- Insert a link to jQuery in the head of your template, I use Google's:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- Insert links to the script, css and initialization script for the slideshow:
<!--Featured listings slideshow -->
<link rel="stylesheet" type="text/css" href="{template_url}/css/home_slideshow.css" title="styles1" />
<script type="text/javascript" src="{template_url}/scripts/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
- Here's the CSS I used:
#slider {
width: 275px;
height: 206px;
position: relative;
overflow: hidden;
margin-bottom:28px;
}
#sliderContent {
width: 275px;
position: absolute;
top: 0;
margin-left: 0;
}
img.FeaturedListingSlide {
width: 275px;
height: 206px;
margin: 0px !important;
margin-bottom: 9px !important;
}
li.sliderImage {
list-style-type: none !important;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
left: 0;
font: 12px Arial, Helvetica, sans-serif;
padding: 2px 10px 10px 10px;
width: 275px;
background-color: #111;
filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
/*top: 0;*/
}
.sliderImage span strong {
font-size: 13px;
font-weight: bold;
display: block;
}
.clear {
clear: both;
}
You will notice I am resizing my "full image" with CSS here....I know...tut tut...but my thumbs were too small and I couldn't "upsize" them. I suppose ultimately I could get php to make 3 images upon upload, but this will do for now, and I only have four featured listings :) Now to "plumb it in"
I used the following code as my "featured_listing_horizontal.html":
{featured_listing_block}
{featured_img_block}
<li class="sliderImage">
<a href="{featured_url}"><img class="FeaturedListingSlide" src="{featured_large_src}" alt="Something SEO here" /> <span><strong>{listing_title}</strong>Featured {listing_field_property_type}</span></a>
</li>
{/featured_img_block}
{/featured_listing_block}
Then it was just a matter of inserting this into the template:
<div id="slider">
<ul id="sliderContent">
{featured_listings_horizontal}
</ul>
</div>
Of course you can style the gallery any way you like, in fact you could dump the jQuery altogether and go with something else. Ultimately the cool bit is getting the featured listings to simply display as a list. Once you have that you can style it however you like. Including of course the thing I have to do next which is to add some <noscript> content for it to fall back on. Just a single featured listing I guess :)
Well there you are. Enjoy. I'm flat out at the moment, but if you require assistance post below and I'll try to help.
Tom
The code is very much "made for my own project", but should be easy to adapt to your requirements.
I used the s3Slider jQuery plugin,, I only modified the CSS a little, not the script, so feel free to get the compressed version (1.6k!) from here:
http://www.serie3.info/s3slider/index.php
Instructions follow:
- Insert a link to jQuery in the head of your template, I use Google's:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- Insert links to the script, css and initialization script for the slideshow:
<!--Featured listings slideshow -->
<link rel="stylesheet" type="text/css" href="{template_url}/css/home_slideshow.css" title="styles1" />
<script type="text/javascript" src="{template_url}/scripts/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
- Here's the CSS I used:
#slider {
width: 275px;
height: 206px;
position: relative;
overflow: hidden;
margin-bottom:28px;
}
#sliderContent {
width: 275px;
position: absolute;
top: 0;
margin-left: 0;
}
img.FeaturedListingSlide {
width: 275px;
height: 206px;
margin: 0px !important;
margin-bottom: 9px !important;
}
li.sliderImage {
list-style-type: none !important;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
left: 0;
font: 12px Arial, Helvetica, sans-serif;
padding: 2px 10px 10px 10px;
width: 275px;
background-color: #111;
filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
/*top: 0;*/
}
.sliderImage span strong {
font-size: 13px;
font-weight: bold;
display: block;
}
.clear {
clear: both;
}
You will notice I am resizing my "full image" with CSS here....I know...tut tut...but my thumbs were too small and I couldn't "upsize" them. I suppose ultimately I could get php to make 3 images upon upload, but this will do for now, and I only have four featured listings :) Now to "plumb it in"
I used the following code as my "featured_listing_horizontal.html":
{featured_listing_block}
{featured_img_block}
<li class="sliderImage">
<a href="{featured_url}"><img class="FeaturedListingSlide" src="{featured_large_src}" alt="Something SEO here" /> <span><strong>{listing_title}</strong>Featured {listing_field_property_type}</span></a>
</li>
{/featured_img_block}
{/featured_listing_block}
Then it was just a matter of inserting this into the template:
<div id="slider">
<ul id="sliderContent">
{featured_listings_horizontal}
</ul>
</div>
Of course you can style the gallery any way you like, in fact you could dump the jQuery altogether and go with something else. Ultimately the cool bit is getting the featured listings to simply display as a list. Once you have that you can style it however you like. Including of course the thing I have to do next which is to add some <noscript> content for it to fall back on. Just a single featured listing I guess :)
Well there you are. Enjoy. I'm flat out at the moment, but if you require assistance post below and I'll try to help.
Tom