Circular plugin (jQuery Tools) using forms and inputs instead of images

Circular plugin (jQuery Tools) using forms and inputs instead of images

Hello,

I'm quite new to jQuery so I have some troubles with the use of it. The circular plugin perfectly worked with images, but I got some trouble to make the arrows work when I use forms with <input type="image" /> instead of <img />.


When I click on the input, no problem with the image or the title they both work fine, but when I click the next or previous button nothing happens.

Firebug says: "p.position() is undefined" on jquery.tools.min.js at line 47 :

  1. {var p=m.eq(o);if(k.vertical){f.css({top:-p.position().top})}
    else{f.css({left:-p.position().left})}}

Here is my jquery code :

  1. $(document).ready(function() {
     
    // initialize scrollable together with the circular plugin $("#infinite").scrollable({vertical:true, size: 3}).circular(); 
     });
     
    $(function() {
     
    $(".items form").submit(function() {
     
    id = $(this).find("input[name=id]").val(); 
    trait = $(this).attr("action");
    title = $(this).find("input[type=image]").attr("alt");
    url=$(this).find("input[type=image]").attr("longdesc");
    $(this).find(".bulle").remove();
     
    alert(id);
    $("input").attr("class","");
     
     
    // get handle to element that wraps the image and make it semitransparent
    var wrap = $("#image_wrap").fadeTo("medium", 0.5);
     
    var img = new Image();
     
    // make wrapper fully visible
    wrap.fadeTo("fast", 1);
     
     
     
    // change the image
    wrap.find("img").attr("src", url);
    wrap.find("img").attr("title", title);
    wrap.find("img").attr("alt", "Basse" + title);
    $(this).find("input[type=image]").attr("class","active");
     
    $("#titreguitare").fadeOut("fast");
    $("#titreguitare").empty();
    // change the title
    $("#titreguitare").append(title);
    $("#titreguitare").fadeIn("fast");
     
    return false; //the form is not visible
     
     });
    });
     













































and the php code associated :

  1. <div id="menucreation" class="prev"> 
                    <!-- "previous page" action --> 
                    <a class="prevPage browse up"></a> 
     
                    <!-- root element for scrollable --> 
                    <div class="scrollable" id="infinite">     
                         
                        <!-- root element for the items --> 
                        <div class="items"> 
                        <?php  
                            $retour = mysql_query('SELECT titre,imgmini,img,id FROM photo'); //WHERE cat="'.$_POST['cat'].'" 
     
                            while ($donnees = mysql_fetch_array($retour)) 
                            { 
    echo '<div><form action="traitement.php" method="post"> 
                                      <input type="hidden" name="id" value="'.$donnees['id'].'" /> 
                                      <input type="image" src="'.$donnees['imgmini'].'" alt="'.$donnees['titre'].'" longdesc="'.$donnees['img'].'" id="'.$donnees['id'].'" /></form></div>'; 
                            } 
                             
            ?> 
    <div style="opacity: 1;" id="image_wrap"> <img src="http://static.flowplayer.org/tools/img/blank.gif" width="760" alt="" /> </div> 
     
    <div id="titre"><h2 id="titreguitare"></h2></div>























Many thanks for your help,

Michael