problem with modified jquery ui photo manager

I'm using a modified version of the jquery ui photo manager example on their site. My problem i am having is i want the photo to go to an external link as well as being dragable. How do i do this?

i thought it would be as simple as wrapping the image with an tag, but that doesn't work.

Any ideas or thoughts?

Jquery code i'm using is:

                    $(function() {
            // there's the gallery and the favourites
            var $gallery = $('#icon-gallery'), $favourites = $('#favourites');

            // let the gallery items be draggable
            $('li',$gallery).draggable({
            cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
            revert: 'invalid', 
            helper: 'clone',
            cursor: 'move'
            });

            // let the favourites be droppable, accepting the gallery items
            $favourites.droppable({
            accept: '#icon-gallery > li',
            activeClass: 'highlight',
            drop: function(ev, ui) {
              addToFavourites(ui.draggable);
            }
            });



            // image remove from favourites function
            var recycle_icon = '<a href="#" title="remove this icon" class="ui-icon remove-icon">Remove icon</a>';
            function deleteImage($item) {

            $item.fadeOut(function() {
              $item.find('a.remove-icon').remove();

              $item.animate({ height: '96px',width: '96px' }).append(add_icon).find('img').animate({ height: '48px',width: '48px' }).end().appendTo($gallery).fadeIn();
            });
            }

            // image add to favourites function
            var add_icon = '<a href="#" title="Add to favourites" class="ui-icon add-icon">Add icon</a>';
            function addToFavourites($item) {
            $item.fadeOut(function() {
              var $list = $('ul',$favourites).length ? $('ul',$favourites) : $('<ul class="gallery clearfix"/>').appendTo($favourites);

              $item.find('a.add-icon').remove();
              $item.append(recycle_icon).appendTo($list).animate({ height: '128px',width: '128px' }).find('img').animate({ height: '96px',width: '96px' }).fadeIn();
                                  });


            }


            // resolve the icons behavior with event delegation
            $('ul.gallery > li').click(function(ev) {
            var $item = $(this);
            var $target = $(ev.target);

            if ($target.is('a.add-icon')) {
              addToFavourites($item);
            } else if ($target.is('a.remove-icon')) {
              deleteImage($item);
            }

            return false;
            });



            $(".btn-slide").click(function(){
            $("#icon-gallery").slideToggle("slow");
            $(this).text($(this).text() == 'Show icon bank' ? 'Hide icon bank' : 'Show icon bank');
            $(this).toggleClass("btn-active"); return false;
            });



            });

the html look like:

            <div id="favourites" class="ui-widget-content ui-state-default">

            <h2>My Favourites</h2>

            </div>








            <div class="slider-container">

            <ul id="icon-gallery" class="gallery  clearfix">
            <li > <a href="http://www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>
            <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>
            <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>

            <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>

           开发者_开发技巧 <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>

            <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>

            <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>

            <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>

            <li > <a href="www.google.co.uk" class="icon-link"><img src="images/addressbook.png"  alt="Alt tag for the icon" width="48" height="48" /></a>
            <h5 class="">Name of the icon</h5>
            <a href="#" title="Add icon" class="ui-icon add-icon">Add icon</a>
            </li>

            </ul>

Problem solved, i had the return false in the wrong place.