Question

I would like to create a “gallery” slideshow using Jquery Tools Scrollable plugin.
But it’s impossible to add tag like
<a href='something'><img src='myimage' /> </a>

In particular it works well if i use only <img> tag ..but if i “append” before the “a href” tag it will stop working …

Anyone know why ? Or anyone can suggest me a solutions or a control most indicated for my problem ?

Thankyou

EDIT

Css cod:
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {

/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;

/* custom decorations */
border:1px solid #ccc;
background:url(/img/global/gradient/h300.png) repeat-x;

}

/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it’s enough that you set the width and height for the root element and
not for this element.
/
.scrollable .items {
/ this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}

.items div {
float:left;
width:680px;
}

/* single scrollable item */
.scrollable img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;

-moz-border-radius:4px;
-webkit-border-radius:4px;

}

/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}

/* position and dimensions of the navigator */
.navi {
margin-left:328px;
width:200px;
height:20px;
}

/* items inside navigator */
.navi a {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(/images/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
}

/* mouseover state */
.navi a:hover {
background-position:0 -8px;
}

/* active state (current page state) */
.navi a.active {
background-position:0 -16px;
}

Html:

  <!-- "previous page" action -->
        <a class="prev browse left">Prev.</a>
        <!-- root element for scrollable -->
        <div class="scrollable">
            <!-- root element for the items -->
            <div class="items">                                        
                <a href='/annuncio.aspx?idannuncio=13' border='0'><img src='/fotoannunci/13-1.jpg' class='ResizeFotoSmall' /></a> 

            </div>
        </div>
        <!-- "next page" action -->
        <a class="next browse right">Next</a>

Answer 1

The jQuery Tools Scrollable plugin can basically work with any markup you desire. Sounds like you have an issue with the way you’ve setup the scrollable options in combination with some funky CSS and or markup.

Try wrapping your scrollable elements in a containing div, give it class name (for example “ScrollableItem”). These items need to be children of the element that you’ve spefified as the “items” property in the scrollable constructor. For example, lets give the containng element a class name of “ScrollableItems” Take a look at the javascript for scrollable below:

$('.Scrollable').scrollable({
        items: '.ScrollableItems'
});

Check out the corresponding markup (example):

<div class="Scrollable">
<div class="ScrollableItems">
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
    <div class="ScrollableItem">
          <a href="someurl"><img src="someimgsrc" /></a>
    </div>
</div>
</div>

The CSS (example):

.Scrollable {
      height:166px; /* example */
      overflow:hidden;
}

.ScrollableItems {
      position:absolute;
      width:20000em;
}

You’ll need your own CSS rules and additional scrollable javascript params to get your specic project working correctly, but the scrollable tools can work with virtually any semantically correct markup.

I’d also take a look at their examples as well as their API here.

Let me know how it goes.
Acorn