morteza_mokhtari
شنبه 28 بهمن 1391, 13:34 عصر
سلام دوستان بنده میخوام از یک گالری تصاویر تویه سایتم استفاده کنم ولی نحوه استفاده از اون رو نمیدوم کدیش به ای صورت هست
$('#gallery').jqCoolGallery ({
galleryTileWidth: 216, // width of gallery tiles
galleryTileHeight: 150, // height of gallery tiles
galleryHoverExpand: true, // the gallery tiles expand when hovering
galleryColumnCount: 4, // eliminates right margin in last column
galleryTooltip: 'Click To Open This Gallery', // tooltip for all gallery tiles
imageAreaWidth: 675, // width of image area
imageAreaHeight: 450, // height of image area
imageAreaPadding: '0 15px 0 0', // padding between image area and panel
panelAreaWidth: 240, // panel area width
thumbWidth: 50, // thumb width
thumbHeight: 35, // thumb height
debug: true // debug is on (sends messages to js console)
});
The HTML Markup
The "rel" attribute of each gallery <li> element specifies the URL to load when the gallery is opened. The URL must return the slideshow unordered list <ul> (see below for markup).
<div id="gallery">
<ul class="jqcg-gallery" style="opacity: 0;">
<!-- captions are specified by data-title and data-desc attributes -->
<li data-title="Gallery 1" data-desc="This is the first gallery" rel="demo/galleries/gallery1.html">
<img src="demo/galleries/gallery1/_thumb.jpg" alt="">
</li>
<li data-title="Gallery 2" data-desc="This is the second gallery" rel="demo/galleries/gallery2.html">
<img src="demo/galleries/gallery2/_thumb.jpg" alt="">
</li>
<li data-title="Gallery 3" data-desc="This is the third gallery" rel="demo/galleries/gallery3.html">
<img src="demo/galleries/gallery3/_thumb.jpg" alt="">
</li>
<li data-title="Gallery 4" data-desc="This is the fourth gallery" rel="demo/galleries/gallery4.html">
<img src="demo/galleries/gallery4/_thumb.jpg" alt="">
</li>
<!-- captions are specified by a div with "caption" class, which gives us more control over formatting -->
<li data-title="Gallery 5" data-desc="This is the fifth gallery" rel="demo/galleries/gallery5.html">
<img src="demo/galleries/gallery5/_thumb.jpg" alt="">
<div class="caption">
<p><strong>Gallery 5</strong></p>
<p>Add <em>formatting</em> to captions.</p>
</div>
</li>
<li data-title="Gallery 6" data-desc="This is the sixth gallery" rel="demo/galleries/gallery6.html">
<img src="demo/galleries/gallery6/_thumb.jpg" alt="">
<div class="caption">
<p><strong>Gallery 6</strong></p>
<p>Add <strong>formatting</strong> to captions.</p>
</div>
</li>
<li data-title="Gallery 7" data-desc="This is the seventh gallery" rel="demo/galleries/gallery7.html">
<img src="demo/galleries/gallery7/_thumb.jpg" alt="">
<div class="caption">
<p><strong>Gallery 7</strong></p>
<p>Add <a href="#">links</a> to captions.</p>
</div>
</li>
<li data-title="Gallery 8" data-desc="This is the eigth gallery" rel="demo/galleries/gallery8.html">
<img src="demo/galleries/gallery8/_thumb.jpg" alt="">
<div class="caption">
<p><strong>Gallery 8</strong></p>
<p>Add <u>formatting</u> to captions.</p>
</div>
</li>
</ul>
</div>
The markup returned from the URL that is demand loaded must look like this:
<ul>
<li>
<img src="demo/galleries/gallery1/5633.jpg" width="300" height="450" data-thumb="demo/galleries/gallery1/5633_thumb.jpg" alt="" />
<div class="caption">This is the caption.</div>
</li>
</ul>
ببنید میگه که قسمت rel هر li باید یک عبارتی مثل بالا برگردونه حالا من چطوری این کار رو بکنم در صورتی که هم از ajax استفاده کرده در ضمن بنده از asp.net استفاده میکنم.
$('#gallery').jqCoolGallery ({
galleryTileWidth: 216, // width of gallery tiles
galleryTileHeight: 150, // height of gallery tiles
galleryHoverExpand: true, // the gallery tiles expand when hovering
galleryColumnCount: 4, // eliminates right margin in last column
galleryTooltip: 'Click To Open This Gallery', // tooltip for all gallery tiles
imageAreaWidth: 675, // width of image area
imageAreaHeight: 450, // height of image area
imageAreaPadding: '0 15px 0 0', // padding between image area and panel
panelAreaWidth: 240, // panel area width
thumbWidth: 50, // thumb width
thumbHeight: 35, // thumb height
debug: true // debug is on (sends messages to js console)
});
The HTML Markup
The "rel" attribute of each gallery <li> element specifies the URL to load when the gallery is opened. The URL must return the slideshow unordered list <ul> (see below for markup).
<div id="gallery">
<ul class="jqcg-gallery" style="opacity: 0;">
<!-- captions are specified by data-title and data-desc attributes -->
<li data-title="Gallery 1" data-desc="This is the first gallery" rel="demo/galleries/gallery1.html">
<img src="demo/galleries/gallery1/_thumb.jpg" alt="">
</li>
<li data-title="Gallery 2" data-desc="This is the second gallery" rel="demo/galleries/gallery2.html">
<img src="demo/galleries/gallery2/_thumb.jpg" alt="">
</li>
<li data-title="Gallery 3" data-desc="This is the third gallery" rel="demo/galleries/gallery3.html">
<img src="demo/galleries/gallery3/_thumb.jpg" alt="">
</li>
<li data-title="Gallery 4" data-desc="This is the fourth gallery" rel="demo/galleries/gallery4.html">
<img src="demo/galleries/gallery4/_thumb.jpg" alt="">
</li>
<!-- captions are specified by a div with "caption" class, which gives us more control over formatting -->
<li data-title="Gallery 5" data-desc="This is the fifth gallery" rel="demo/galleries/gallery5.html">
<img src="demo/galleries/gallery5/_thumb.jpg" alt="">
<div class="caption">
<p><strong>Gallery 5</strong></p>
<p>Add <em>formatting</em> to captions.</p>
</div>
</li>
<li data-title="Gallery 6" data-desc="This is the sixth gallery" rel="demo/galleries/gallery6.html">
<img src="demo/galleries/gallery6/_thumb.jpg" alt="">
<div class="caption">
<p><strong>Gallery 6</strong></p>
<p>Add <strong>formatting</strong> to captions.</p>
</div>
</li>
<li data-title="Gallery 7" data-desc="This is the seventh gallery" rel="demo/galleries/gallery7.html">
<img src="demo/galleries/gallery7/_thumb.jpg" alt="">
<div class="caption">
<p><strong>Gallery 7</strong></p>
<p>Add <a href="#">links</a> to captions.</p>
</div>
</li>
<li data-title="Gallery 8" data-desc="This is the eigth gallery" rel="demo/galleries/gallery8.html">
<img src="demo/galleries/gallery8/_thumb.jpg" alt="">
<div class="caption">
<p><strong>Gallery 8</strong></p>
<p>Add <u>formatting</u> to captions.</p>
</div>
</li>
</ul>
</div>
The markup returned from the URL that is demand loaded must look like this:
<ul>
<li>
<img src="demo/galleries/gallery1/5633.jpg" width="300" height="450" data-thumb="demo/galleries/gallery1/5633_thumb.jpg" alt="" />
<div class="caption">This is the caption.</div>
</li>
</ul>
ببنید میگه که قسمت rel هر li باید یک عبارتی مثل بالا برگردونه حالا من چطوری این کار رو بکنم در صورتی که هم از ajax استفاده کرده در ضمن بنده از asp.net استفاده میکنم.