Using the awesome jQuery Cycle plugin, Im working on a "wall" with
each title rotating between pics but Im not getting any love.
The page is setup like this:
<span class='pics'>
<img alt="" border="0" height="48" src="http://
s.twimg.com/a/1263495459/images/default_profile_1_normal.png"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/269773851/IMG_0812_2_normal.JPG"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/63490705/Photo_163_normal.jpg" width="48" /
>
<img alt="" border="0" height="48" src="http://
s.twimg.com/a/1263410604/images/default_profile_2_normal.png"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/552266897/fav_icon_normal.png" width="48" /
>
</span>
<span class='pics'>
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/130977868/web_normal.jpg" width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/325110783/sc_normal.jpg" width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/408380189/blurred_me_normal.jpg"
width="48" />
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/43603112/wayne_mii_normal.png" width="48" /
>
<img alt="" border="0" height="48" src="http://
s.twimg.com/a/1263495459/images/default_profile_6_normal.png"
width="48" />
</span>
<span class='pics'>
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/524747624/avatar_normal.jpg" width="48" /
>
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/564187483/momandzoeicon_normal.jpg"
width="48" />
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/269795496/new_normal.jpg" width="48" />
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/632178730/IMG_2401_small_normal.JPG"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/320947559/Genright_Pic_normal.jpg"
width="48" />
</span>
<span class='pics'>
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/564248764/Fundmission_normal.jpg"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/186738229/Image_4_normal.jpg" width="48" /
>
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/609575508/twitterProfilePhoto_normal.jpg"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/65779995/me_normal.jpg" width="48" />
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/610357728/twitterProfilePhoto_normal.jpg"
width="48" />
</span>
<span class='pics'>
<img alt="" border="0" height="48" src="http://
a1.twimg.com/profile_images/633081412/scfxmpsoeriutcd_normal.jpg"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/605685005/twitterProfilePhoto_normal.jpg"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/476884751/twitterProfilePhoto_normal.jpg"
width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/561458611/icon1_normal.jpg" width="48" />
<img alt="" border="0" height="48" src="http://
a3.twimg.com/profile_images/
613936191/9333_1059297581122_1786397902_129191_152968_n_normal.jpg"
width="48" />
</span>
and based on examples Ive tried this:
$('.pics').each(function() {
$(this).cycle({
fx: 'fade',
speed: 2500
});
});
and this
$('.pics').cycle({
fx: 'fade',
speed: 2500
});
without any luck. Either way I end up with a SINGLE tile rotating
images instead of five individual tiles of changing images. Also, I
want each one to change at random times so they arent all changing at
the same time.
Thanks!
