jquerytools переключить кнопку воспроизведения/паузы на прокрутку

Question

Здравствуйте им строить слайд на Jquerytools, используя этот http://jquerytools.org/demos/scrollable/gallery.html

И Автопрокрутку http://jquerytools.org/documentation/scrollable/autoscroll.html

http://jsfiddle.net/PcAwU/

Моей проблема в том, что я могу объединить кнопки Pause Play & так если воспроизведение активно, отображается пауза, и наоборот.

http://jsfiddle.net/PcAwU/ Здесь вы можете найти мой код ..

Кроме того, если вы можете сказать мне, как изменить

<button type="button" onClick="api.play()">Play</button> 

WHIT обычную ссылку IMG, так что я могу сделать изображение кнопки как

<a href="#" onClick="api.play()" ><img src="#"></a> 

только с правильным синтаксисом,

Последняя проблема заключается в том, что в этой части я пытаюсь заменить клик на hover. но первое изображение обыкновения появляться при загрузке страницы .. поэтому я создать «неисправность», когда я делаю что

эта линия, где я изменить «нажмите» с «зависанием»

$(".items img").click(function() { 

Answer 1

решаемыми с помощью

<script> 
$(function() { 
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true }); 

$(".items img").click(function() { 
    // see if same thumb is being clicked 
    if ($(this).hasClass("active")) { return; } 

    // calclulate large image's URL based on the thumbnail URL (flickr specific) 
    var url = $(this).attr("src").replace("_t", ""); 

    // get handle to element that wraps the image and make it semi-transparent 
    var wrap = $("#image_wrap").fadeTo("medium", 0.5); 

    // the large image from www.flickr.com 
    var img = new Image(); 


    // call this function after it's loaded 
    img.onload = function() { 

     // make wrapper fully visible 
     wrap.fadeTo("fast", 1); 

     // change the image 
     wrap.find("img").attr("src", url); 

    }; 

    // begin loading the image from www.flickr.com 
    img.src = url; 

    // activate item 
    $(".items img").removeClass("active"); 
    $(this).addClass("active"); 

// when page loads simulate a "click" on the first image 
}).filter(":first").click(); 

// provide scrollable API for the action buttons 
window.api = root.data("scrollable"); 

}); 


function toggle(el){ 
    if(el.className!="play") 
    { 
     el.className="play"; 
     el.src='images/play.png'; 
     api.pause(); 
    } 
    else if(el.className=="play") 
    { 
     el.className="pause"; 
     el.src='images/pause.png'; 
     api.play(); 
    } 

    return false; 
} 

</script> 

И кнопки идут так:

<input type="image" src="images/atras.png" onclick="api.prev()" > 

    <input type="image" src="images/pause.png" class="pause" onclick="toggle(this);" > 

    <input type="image" src="images/adelante.png" onclick="api.next()" > 

Я надеюсь, что это помогает кому-то