dotNETportal.cz

Zdravím,

snažím se do Asp.net aplikace implementovat slideshow, na jedné stránce zobrazuji v datalistu miniatury, které slouží jako odkazy na obrázky v plné velikosti.

Mimo datalist je tlačítko pro spuštění slideshow, problém je v tom, že nevím jak dostat obrázky v datalistu do kolekce která slouží jako zdroj obrázků pro slideshow na jiné stránce.

item template v datalistu

<a href='<%# Eval("Extension", "/Images/{0}") %>'>
                <asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Extension", "~/Images/ThumbnailImages/{0}") %>' runat="server" /></a>

kolekce obrázků pro slideshow

 slides: [			// Slideshow Images
								{ image: 'images/30.jpg', title: 'title',thumb: 'images/t30.jpg', url: '#' },
								{ image: 'images/36.jpg', title: 'title', thumb: 'images/t36.jpg', url: '#' },
								{ image: 'images/37.jpg', title: 'title', thumb: 'images/t37.jpg', url: '#' }
												],

Být vámi tak si ke každému obrázku <asp:Image /> poznamenám pomocí data atributů, co k němu potřebujete, a nemusíte tak generovat kolekci pro javascripty - přes jQuery si najdete všechny img a přečtete si z nich co libo jest.

Něco jako toto:

<asp:Image runat="server" ImageUrl='<%# Bind("ThumbnailUrl") %>'
   data-largeImage='<%# Bind("LargeImageUrl") %>'
   data-title='<%# Bind("Title") %>' />

A v jQuery si tu kolekci postavte za běhu - pokud všechny náhledy budou třeba v elementu, co má class="images", pak v jQuery stačí zavolat $(".images img") a vytáhnete si tím všechny obrázky. U každého pak přes funkci attr("data-largeImage") vytáhnete potřebné hodnoty.

Na druhou stranu možná řešíte věc, kterou už řeší padesát jQuery pluginů a externích knihoven.