Я не использовал этот инструмент jQuery. Но я бы подумал, что для инструмента потребуется структура
<div id="products">
<img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" />
<img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />
<img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" />
</div>
Инструмент будет искать img внутри div (опять же, я не видел код, так что это предположение). Многие плагины jQuery требуют определенного формата.
Я бы сделал это:
<div id="products">
<img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" id="image1" />
<img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" id="image2" />
<img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" id="image3" />
</div>
Добавление идентификаторов к каждому тегу. Я попробовал это, и это, кажется, не сломало плагин. (Извините за ужасное соглашение об именах:))
Затем привяжите щелчок изображений к перенаправлению, используя javascript:
$("#image1").click(function() {
window.location = 'http://www.google.co.za';
});
$("#image2").click(function() {
window.location = 'http://www.google.co.za/somwhereelse';
});
$("#image3").click(function() {
window.location = 'http://www.google.co.za/helloworld';
});
Надеюсь, это поможет
EDIT
Чтобы ответить на ваш вопрос, чтобы показать содержимое второго изображения при загрузке страницы, у меня есть следующее решение. Для меня это немного похоже на обходной путь, но, надеюсь, это сработает.
При загрузке страницы происходит то, что flowplayer скрывает все изображения, кроме первого, с использованием встроенных стилей.
Итак, нам нужно удалить этот стиль из первого изображения и добавить его ко второму изображению. Помните, что это должно происходить только один раз при загрузке страницы, поэтому вам нужно будет добавить его в функцию document.ready.
//make the display attribute of the style none. This will render it invisible
$("#free").css('display','none');
//make the display attribute of the style block (as what Flowplayer does)
$("#commercial").css('display','block');
Важно, чтобы это происходило только один раз, и тогда функциональность FlowPlayer обычно включается при наведении мыши.