Стоит задача представить группу картинок в определённом блоке в виде переключаемых по наведению слайдов. В частности супруга хочет, чтобы в её портфолио было минимум по две фотографии - до и после обработки, но отображалась бы только одна, а вторая только при наведении на первую

Для написания плагина на jQuery нужно использовать скелет такого плагина, я использую этот, он довольно наглядо показывает как устроен плагин

jQuery.log = function(message) {
  if(window.console) {
     console.debug(message);
  } else {
     alert(message);
  }
};
jQuery.log("jQuery test!!!")

Суть этого кода в том, что мы создали внутри jQuery функцию которая печатает сообщение либо в консоль Firebug либо выводит, привычным для многих, алертом. Кстати его довольно удобно использовать при отладке JS кода.

Идея слайдера в том, что скрываются ВСЕ, кроме первой, фотографии в блоке, затем к первой фотографии прицепляется обработчик который при наведении курсора меняет значения src  и title у первой фотографии, а берёт эти значения из словаря видимого только внутри плагина. Теперь собственно код плагина слайдера:

(function($){
    jQuery.fn.ffslider = function(){
        function next_img(img,name) {
            if(list_slide[name].pos==list_slide[name].count)list_slide[name].pos=0;
            img.src=list_slide[name].img[list_slide[name].pos].src;
            img.title=list_slide[name].img[list_slide[name].pos].title;
            list_slide[name].pos+=1;
        }
        var element = this;
        var list_slide=new Object();
        element.each( function(i){
            var dslid = this;
            count = $("img",dslid).length
            if(count>1){
                ndslid = "slider"+i;
                $(dslid).attr("id",ndslid);
                list_slide[ndslid]={num:i,pos:1,count:$("img",dslid).length,img:new Array(count)};
                $("img",dslid).each(function(j){
                    var img = this;
                    list_slide[ndslid].img[j]={title:img.alt,src:img.src};
                });
                $("img:first",dslid).bind("mouseover",{n:ndslid},function(event){next_img(this,event.data.n)})
                $("img:first",dslid).bind("mouseout",{n:ndslid},function(event){next_img(this,event.data.n)})
            }
            $("img:first",dslid).show();
        });
        return element;
    }
})(jQuery);

Здесь внутри jQuery создаётся объект jQuery.fn.ffslider к которому привязывается функция которая представляет собой описание класса слайдера. Она содержит внутри себя функцию переключения изображения (пока только вперёд) next_img  и два цикла, первый перебирает все подходящие блоки (это может быть как один так и множество блоков), а в каждом блоке обрабатывает все изображения формируя при этом "именной" для блока "словарь" в котором хранится информация для работы слайдера. Если разложить этот словарь то получится чтото вроде

list_slide={
    "slider1":{
        count:2,
        pos:1,
        img:[(
            {title:"image1",src:"http://breys.ru/upload/images/1259311393.81.JPG"}
            ,{title:"image2",src:"http://breys.ru/upload/images/1259311339.92.JPG"})]
        }
    }
    "slider2":{
        count:2,
        pos:1,
        img:[(
            {title:"image3",src:"http://breys.ru/upload/images/1259311453.81.JPG"}
            ,{title:"image4",src:"http://breys.ru/upload/images/1259311579.92.JPG"})]
        }
    }
}

Такой "словарь" позволяет во-первых создавать n-количество "слайдеров", а во-вторых используется функцией для "круговорота" фотографий в слайдере. И вообще очень удобная вещь, например чтобы получить заголовок и адрес второй картинки во втором блоке нужно написать так:

jQuery.log( list_slide["slider2"].img[1].title + " = " + list_slide["slider2"].img[1].src )

После создания "словаря" плагин находит ПЕРВОЕ изображение, создаёт для него обработчики событий mount[over|out] в котором вызывается функция цикличной смены изображения, а под конец делает ПЕРВОЕ изображение в списке видимым.

Если в блоге находиться только одна фотография то плагин только делает её видимой, пропуская этот блок

Стоит обратить внимание, что функция возвращает элемент this, это необходимо (но не обязательно) чтобы можно было использовать слайдер в каскадах/цепочках вызовов функция jQuery, например

$(".pages .slider").ffslider().remove();

Тут будет инициализированы все слайдеры, а затем удалены :)

Теперь, чтобы применить этот плагин необходимо подготовить

1. html - поместить изображение в блок с классом slider, не принципиально, так как можно при запуске слайдера указать даже body
2. css - скрыть все изображения внутри блока, важно иначе все изображения будут отображены, а первое будет моргать при наведении
3. включить плагин в момент загрузки страницы

<script type="text/javascript" src="http://breys.ru/js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".slider").ffslider();
    });
</script>
<style type="text/css">
    .slider img{display:none;}
</style>
</head>
<body>
    <div class="slider">
        <img src="http://breys.ru/upload/images/1258398987.03.png" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399034.81.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399057.32.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399088.85.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399100.32.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
        <img src="http://breys.ru/upload/images/1258399110.05.jpeg" alt="Скриншоты Linux версии игры Machinarium"  />
    </div>

А вот так это выглядит, по-моему получился довольно удобный, компактный и вроде бы расширяемый плагин