makfak supports this item


233 comments found.

hi how to disable the up and down scrolling arrows. And also how to disable the right textcontainer. I just want only the left textcontainer and the image. thanks

The arrows that scroll through the tabs only appear when you have more tabs than you’ve set to display. Setting “tabLock” to match the number of tabs will prevent the arrows from appearing.

I’m not sure what you’re talking about when you refer to their being both a right and left textcontainer. Are you, when using the default options, referring to the “tabs” as the “left textcontainer” and the actual “textcontainer” (the content that appears over the image) as the “right text container”? If you are trying to hide the content that appears over the image you can either hide it with CSS or set “txtBoxWidth” to “0px”.

And when the txtboxcontainer is disabled i still want the image to be a link.


Make sure “activeWindowIsLink” is set to “true”.

ya for both arrows and right txt container i have used css to display none.

Hi, I’m trying to use this script in Drupal 7.

I added this .js

(function ($) { jQuery(document).ready(function(){ $(’#preFeature’).siteFeature({ }); }); })(jQuery);

But I get the following error:

TypeError: sfcurrent.clone(...).prop is not a function http://localhost/mywebsite/sites/all/themes/mytheme/extra/slideshow/js/jquery.siteFeature.js Line 766

any idea?

The `.prop()` method was added in jQuery v1.6. You’re probably using the default jQuery (v1.4.4) that comes packaged with Drupal 7.

If you can, you should use a newer version of jQuery. If you really want to continue using v1.4.4 -

Do a find/replace in `jquery.siteFeature.js` finding `.prop(` and replacing it was `.attr(`.

Off the top of my head, I don’t remember if there are other things SiteFeature does that leverage newer jQuery methods but the prop/attr swap should go smoothly.

thank you! it works!

can the articles be automated to scroll form one to another without having to click on them?

Yes, there is an autoplay setting. You can also set the amount of time to stay on a slide before showing the next one.

Hi, is there Wordpress version of this plugin, or is there an easy way to integrate it so that it contains posts from a certain category along with the featured image?


There isn’t a Wordpress version and, unless you’re comfortable getting your hands dirty doing some custom template work, integration isn’t simple.

If you are comfortable working in your templates, SiteFeature is a simple jQuery call that gets applied to an HTML element with a specific markup. If you View Source on the demo (you’ll need to remove the frame wrapper) you’ll see a div#preFeature – that’s the markup you’d need to generate in your template.

Thanks for your interest in SiteFeature.

OK, thanks for your reply. I’m OK tinkering with templates, so I think I’ll give it a go.

I am having trouble making the super-simple-install.html script work. What JQuery function do I need to use to make it work?

I got the super-simple-install.html script to work.

When I use the same code on my wordpress homepage, i just get the 4 div displayed as columns next to each other. I check all the file paths and they are correct. Am I missing something?

If you’ve added jQuery, the SiteFeature JS, your Doc.Ready SiteFeature call, and the appropriate markup to your page you should be all set.

Don’t forget to check your browser’s console for any error messages.

jquery and mootools won’t work together. that was causing the error. everything works fine now. thanks.

I don’t want the text sliding in from the right. I only want the slide image nothing else. Can I disable this text slide feature?

Because SF only offers a callback that fires after the DOM has been injected and not after events have been bound… we’ll have to get creative.

This worked for me:

var SFopts = null;

    endCreateFunction : function (opts) {
        SFopts = opts;

    $('#' + SFopts.txtBoxIdPrefix + 'Container').unbind('click').click(function(e){
        if( == 'A'){
            return true;
        } else {
            // lightbox call goes here
            return false;

What the above snippet does is use the ‘endCreateFunction’ to snag a copy of SF’s internal options obj. After SF has done its thing, we unbind the ‘activeWindowIsLink’ click event that SF set and replace it with our own. The reason for the target.tagName check is to prevent opening the lightbox if the user clicks a link inside the txtBox. You might not need to worry about that since you aren’t showing the txtBox.

Good Luck.

by //lightbox call goes here did you mean the following code
$(document).ready(function() {
        maxWidth    : 800,
        maxHeight    : 600,
        fitToView    : false,
        width        : '70%',
        height        : '70%',
        autoSize    : false,
        closeClick    : false,
        openEffect    : 'none',
        closeEffect    : 'none'
The code used on the image is
<a class="various fancybox.iframe" href="">--</a>

Um… no. Given your working knowledge of javascript and the fact that fancybox doesn’t have an API, ignore my last post and give the following a try…

var $sf = null;
var $txtbox = null;
var $imgbox = null;
var SFopts = null;

    txtBoxWidth: '0px',
    txtBoxAnimateInType: 'blink',
    txtBoxAnimateOutType: 'blink',
    txtBoxAnimateInDuration: 0,
    txtBoxAnimateOutDuration: 0,
    endCreateFunction : function (opts) {
        SFopts = opts;
        // var $tabs = $('#' + opts.tabIdPrefix + 'Container a', '#' + opts.outputElementId);
        $sf = $('#' + opts.outputElementId);
        $txtbox = $sf.find('#' + opts.txtBoxIdPrefix + 'Container');
        $imgbox = $sf.find('#' + opts.imgBgIdPrefix + 'Container');

        var $txts = $txtbox.children();
        var $imgs = $imgbox.children();

        $.each($txts, function(){
            var $this = $(this);
            var id = $this.attr('id');
            var $link = $this.find('a').filter(':last');
            var $clone = $link.clone().text('').css({
                'position' : 'absolute',
                'top' : '0',
                'right' : '0',
                'bottom' : '0',
                'left' : '0'
            $imgs.filter('#' + id).append( $clone );

    // the line below is your fancybox call - add your params

I’ve included the txtBox stuff from your first question to help you see that all of this goes in your Doc.Ready and should be merged with your existing SF call.

Since you need an actual link to click (to make fancybox happy) I’m using the ‘endCreateFunction’ to clone the link into the bgImgs. I’m also styling the link here but you could move that to CSS if you wanted.

Then I unbind the txtBox click events (for completeness) and hide the txtBox container so it doesn’t block the img link clicks.

Finally, I call fancybox on the new img links. You will, of course, need to replace the ‘{...}’ with your own params.

Good Luck.

Hi, I’m having trouble getting the animated part of it to work. I’m new to js and it only shows the styling, here is what i mean Could you have a look at my source code and see where i’ve gone wrong? Thanks.

  1. You’re including jQuery 3 times (a 4th include is commented out) [lines #8, 9, 11, 12]. You only need one
  2. You’re including SiteFeature 2 times [lines #10, 13]. You only need one
  3. You’re including two files (demo.js, demo.css) that don’t exist at the specified locations and don’t appear to be needed by the page
  4. Even though you have a SiteFeature call in your page as content, you aren’t actually calling SiteFeature

Take a look at the super-simple-install.html that came with your download.

Hi, I’m having trouble getting the animated part of it to work. I’m new to js and it only shows the styling, here is what i mean Could you have a look at my source code and see where i’ve gone wrong? Thanks.

I’ve responded to your other post.

Hi Makfak! I’m having trouble…here is what i mean: Could you have a look at my source code and see where i’ve gone wrong? Thanks. Your Carousel look very nice! I want the same! I try to follow your instruction, but apparently dosn’t work for me, could you help me please?? Merci!

Hello! Could you tell me how to change the color of the ’’arrow’’. It’s not the same as the button box… Thank

The arrow is an image. That’s what the “tabBgImg” and “tabBgImgIE6” settings are for.

Thank you! Job done! See it:

can you fix ur live preview page? the screenshot looks like a fit for me. just want to see it in action

I live preview works for me. Which os/browser are you using?

What is the size of JS+CSS?

CSS = 7k uncompressed / 1.2k gzipped

JS = 57k uncompressed / 10.5k gzipped

If your server supports gzipping = 12k

If your server doesn’t support gzipping = 64k

can we put videos instead of pictures

No. Only images are supported.