I am Working asp.net and Jquery.
I have a circular content carousel with jquery in my application with static images (ie) I am manually inserting the images in css.But i need to make it dynamic using sqlserver database.Please give some suggession.
CODE:
.ca-item-2 .ca-icon
{
background-image:url(../Database/images/f1.jpg);
}
This is way in which i am inserting images now.
This is the working code:
<div class="container">
<div class="header">
<a href="http://tympanus.net/Tutorials/PortfolioImageNavigation/"><span>« Previous Demo: </span>Portfolio Image Navigation</a>
<span class="right_ab">
<a href="http://cyberella74.deviantart.com/art/Archigraphs-Animals-Icons-139629985" target="_blank">Animal Icons by Cyberella</a>
<a href="http://tympanus.net/codrops/2011/08/16/circular-content-carousel/"><strong>back to the Codrops post</strong></a>
</span>
</div>
<h1>Circular Content Carousel<span>with jQuery</span></h1>
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="ca-icon"></div>
<!--<h3>Stop factory farming</h3>
<h4>
<span class="ca-quote">“</span>
<span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span>
</h4>-->
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper" runat="server">
<div class="ca-content">
<h6>Animals are not commodities</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>-->
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="ca-icon"></div>
<!--<h3>Respect Life & Rights</h3>
<h4>
<span class="ca-quote">“</span>
<span>I hold that the more helpless a creature, the more entitled it is to protection by man from the cruelty of man.</span>
</h4>-->
<a href="#" class="ca-more">more...</a>
</div>
<div id="ca-content-wrapper">
<div id="ca-content">
<h6>Would you eat your dog?</h6>
<a href="#" id="ca-close">close</a>
<div id="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>-->
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div id="ca-item ca-item-3">
<div id="ca-item-main">
<div id="ca-icon"></div>
<!--<h3>Become 100% meat-free</h3>
<h4>
<span id="ca-quote">“</span>
<span>I feel that spiritual progress does demand at some stage that we should cease to kill our fellow creatures for the satisfaction of our bodily wants.</span>
</h4>-->
<a href="#" id="ca-more">more...</a>
</div>
<div id="ca-content-wrapper">
<div id="ca-content">
<h6>You can change the world</h6>
<a href="#" id="ca-close">close</a>
<div id="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>-->
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-4">
<div class="ca-item-main">
<div class="ca-icon"></div>
<!--<h3>Make a difference</h3>
<h4>
<span id="ca-quote">“</span>
<span>A man is but the product of his thoughts what he thinks, he becomes.</span>
</h4>-->
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>Think globally, act locally</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>-->
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-5">
<div class="ca-item-main">
<div class="ca-icon"></div>
<!--<h3>Say no to killing</h3>
<h4>
<span class="ca-quote">“</span>
<span>A weak man is just by accident. A strong but non-violent man is unjust by accident.</span>
</h4>-->
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>Animals have rights, too!</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>-->
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-6">
<div class="ca-item-main">
<div class="ca-icon"></div>
<!--<h3>Don't believe the lies</h3>
<h4>
<span class="ca-quote">“</span>
<span>An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it.</span>
</h4>-->
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>How essential is meat?</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>-->
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-7">
<div class="ca-item-main">
<div class="ca-icon"></div>
<!--<h3>Save the planet</h3>
<h4>
<span class="ca-quote">“</span>
<span>A small body of determined spirits fired by an unquenchable faith in their mission can alter the course of history.</span>
</h4>-->
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>Collateral damage?</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>-->
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-8">
<div class="ca-item-main">
<div class="ca-icon"></div>
<!--<h3>It's time to move on</h3>
<h4>
<span class="ca-quote">“</span>
<span>A nation's culture resides in the hearts and in the soul of its people.</span>
</h4>-->
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>Let's finally become humans</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
<!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>-->
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h5>Quotes by Mohandas Gandhi</h5>
</div>
You’ll probably be better off inserting your images to the page itself using repeaters and using a jQuery carousel plugin like jCarouselLite to create your circular carousel.