title: circular content carousel with jquery with dynamically loaded images
body: <p>I am Working asp.net and Jquery.</p>
  
  <p>I have a <strong>circular content carousel with jquery</strong> in my application with static images (ie) I am manually inserting the images in css.But i need to make it <strong>dynamic using sqlserver</strong> database.Please give some suggession.</p>
  
  <p>CODE:</p>
  
  <pre><code>   .ca-item-2 .ca-icon
     {
       background-image:url(../Database/images/f1.jpg);
     }
  </code></pre>
  
  <p>This is way in which i am inserting images now.</p>
  
  <p><strong>This is the working code</strong>:</p>
  
  <pre><code>      &lt;div class="container"&gt;
          &lt;div class="header"&gt;
              &lt;a                 href="http://tympanus.net/Tutorials/PortfolioImageNavigation/"&gt;&lt;span&gt;&amp;laquo; Previous Demo: &lt;/span&gt;Portfolio Image Navigation&lt;/a&gt;
              &lt;span class="right_ab"&gt;
                  &lt;a href="http://cyberella74.deviantart.com/art/Archigraphs-Animals-Icons-139629985" target="_blank"&gt;Animal Icons by Cyberella&lt;/a&gt;
                  &lt;a href="http://tympanus.net/codrops/2011/08/16/circular-content-carousel/"&gt;&lt;strong&gt;back to the Codrops post&lt;/strong&gt;&lt;/a&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;h1&gt;Circular Content Carousel&lt;span&gt;with jQuery&lt;/span&gt;&lt;/h1&gt;
          &lt;div id="ca-container" class="ca-container"&gt;
              &lt;div class="ca-wrapper"&gt;
                  &lt;div class="ca-item ca-item-1"&gt;
                      &lt;div class="ca-item-main"&gt;
                          &lt;div class="ca-icon"&gt;&lt;/div&gt;
                          &lt;!--&lt;h3&gt;Stop factory farming&lt;/h3&gt;
                          &lt;h4&gt;
                              &lt;span class="ca-quote"&gt;&amp;ldquo;&lt;/span&gt;
                              &lt;span&gt;The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.&lt;/span&gt;
                          &lt;/h4&gt;--&gt;
                              &lt;a href="#" class="ca-more"&gt;more...&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="ca-content-wrapper" runat="server"&gt;
                          &lt;div class="ca-content"&gt;
                              &lt;h6&gt;Animals are not commodities&lt;/h6&gt;
                              &lt;a href="#" class="ca-close"&gt;close&lt;/a&gt;
                              &lt;div class="ca-content-text"&gt;
                                  &lt;p&gt;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.&lt;/p&gt;
                                  &lt;!--&lt;p&gt;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;&lt;/p&gt;
                                  &lt;p&gt;She packed her seven versalia, put her initial into the belt and made herself on the way.&lt;/p&gt;--&gt;
                              &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Share this&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Become a member&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ca-item ca-item-2"&gt;
                      &lt;div class="ca-item-main"&gt;
                          &lt;div class="ca-icon"&gt;&lt;/div&gt;
                          &lt;!--&lt;h3&gt;Respect Life &amp;amp; Rights&lt;/h3&gt;
                          &lt;h4&gt;
                              &lt;span class="ca-quote"&gt;&amp;ldquo;&lt;/span&gt;
                              &lt;span&gt;I hold that the more helpless a creature, the more entitled it is to protection by man from the cruelty of man.&lt;/span&gt;
                          &lt;/h4&gt;--&gt;
                              &lt;a href="#" class="ca-more"&gt;more...&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div id="ca-content-wrapper"&gt;
                          &lt;div id="ca-content"&gt;
                              &lt;h6&gt;Would you eat your dog?&lt;/h6&gt;
                              &lt;a href="#" id="ca-close"&gt;close&lt;/a&gt;
                              &lt;div id="ca-content-text"&gt;
                                  &lt;p&gt;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.&lt;/p&gt;
                                  &lt;!--&lt;p&gt;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;&lt;/p&gt;
                                  &lt;p&gt;She packed her seven versalia, put her initial into the belt and made herself on the way.&lt;/p&gt;--&gt;
                              &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Share this&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Become a member&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="ca-item ca-item-3"&gt;
                      &lt;div id="ca-item-main"&gt;
                          &lt;div id="ca-icon"&gt;&lt;/div&gt;
                          &lt;!--&lt;h3&gt;Become 100% meat-free&lt;/h3&gt;
                          &lt;h4&gt;
                              &lt;span id="ca-quote"&gt;&amp;ldquo;&lt;/span&gt;
                              &lt;span&gt;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.&lt;/span&gt;
                          &lt;/h4&gt;--&gt;
                              &lt;a href="#" id="ca-more"&gt;more...&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div id="ca-content-wrapper"&gt;
                          &lt;div id="ca-content"&gt;
                              &lt;h6&gt;You can change the world&lt;/h6&gt;
                              &lt;a href="#" id="ca-close"&gt;close&lt;/a&gt;
                              &lt;div id="ca-content-text"&gt;
                                  &lt;p&gt;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.&lt;/p&gt;
                                  &lt;!--&lt;p&gt;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;&lt;/p&gt;
                                  &lt;p&gt;She packed her seven versalia, put her initial into the belt and made herself on the way.&lt;/p&gt;--&gt;
                              &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Share this&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Become a member&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ca-item ca-item-4"&gt;
                      &lt;div class="ca-item-main"&gt;
                          &lt;div class="ca-icon"&gt;&lt;/div&gt;
                          &lt;!--&lt;h3&gt;Make a difference&lt;/h3&gt;
                          &lt;h4&gt;
                              &lt;span id="ca-quote"&gt;&amp;ldquo;&lt;/span&gt;
                              &lt;span&gt;A man is but the product of his thoughts what he thinks, he becomes.&lt;/span&gt;
                          &lt;/h4&gt;--&gt;
                              &lt;a href="#" class="ca-more"&gt;more...&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="ca-content-wrapper"&gt;
                          &lt;div class="ca-content"&gt;
                              &lt;h6&gt;Think globally, act locally&lt;/h6&gt;
                              &lt;a href="#" class="ca-close"&gt;close&lt;/a&gt;
                              &lt;div class="ca-content-text"&gt;
                                  &lt;p&gt;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.&lt;/p&gt;
                                  &lt;!--&lt;p&gt;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;&lt;/p&gt;
                                  &lt;p&gt;She packed her seven versalia, put her initial into the belt and made herself on the way.&lt;/p&gt;--&gt;
                              &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Share this&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Become a member&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ca-item ca-item-5"&gt;
                      &lt;div class="ca-item-main"&gt;
                          &lt;div class="ca-icon"&gt;&lt;/div&gt;
                          &lt;!--&lt;h3&gt;Say no to killing&lt;/h3&gt;
                          &lt;h4&gt;
                              &lt;span class="ca-quote"&gt;&amp;ldquo;&lt;/span&gt;
                              &lt;span&gt;A weak man is just by accident. A strong but non-violent man is unjust by accident.&lt;/span&gt;
                          &lt;/h4&gt;--&gt;
                              &lt;a href="#" class="ca-more"&gt;more...&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="ca-content-wrapper"&gt;
                          &lt;div class="ca-content"&gt;
                              &lt;h6&gt;Animals have rights, too!&lt;/h6&gt;
                              &lt;a href="#" class="ca-close"&gt;close&lt;/a&gt;
                              &lt;div class="ca-content-text"&gt;
                                  &lt;p&gt;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.&lt;/p&gt;
                                  &lt;!--&lt;p&gt;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;&lt;/p&gt;
                                  &lt;p&gt;She packed her seven versalia, put her initial into the belt and made herself on the way.&lt;/p&gt;--&gt;
                              &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Share this&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Become a member&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ca-item ca-item-6"&gt;
                      &lt;div class="ca-item-main"&gt;
                          &lt;div class="ca-icon"&gt;&lt;/div&gt;
                          &lt;!--&lt;h3&gt;Don't believe the lies&lt;/h3&gt;
                          &lt;h4&gt;
                              &lt;span class="ca-quote"&gt;&amp;ldquo;&lt;/span&gt;
                              &lt;span&gt;An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it.&lt;/span&gt;
                          &lt;/h4&gt;--&gt;
                              &lt;a href="#" class="ca-more"&gt;more...&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="ca-content-wrapper"&gt;
                          &lt;div class="ca-content"&gt;
                              &lt;h6&gt;How essential is meat?&lt;/h6&gt;
                              &lt;a href="#" class="ca-close"&gt;close&lt;/a&gt;
                              &lt;div class="ca-content-text"&gt;
                                  &lt;p&gt;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.&lt;/p&gt;
                                  &lt;!--&lt;p&gt;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;&lt;/p&gt;
                                  &lt;p&gt;She packed her seven versalia, put her initial into the belt and made herself on the way.&lt;/p&gt;--&gt;
                              &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Share this&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Become a member&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ca-item ca-item-7"&gt;
                      &lt;div class="ca-item-main"&gt;
                          &lt;div class="ca-icon"&gt;&lt;/div&gt;
                          &lt;!--&lt;h3&gt;Save the planet&lt;/h3&gt;
                          &lt;h4&gt;
                              &lt;span class="ca-quote"&gt;&amp;ldquo;&lt;/span&gt;
                              &lt;span&gt;A small body of determined spirits fired by an unquenchable faith in their mission can alter the course of history.&lt;/span&gt;
                          &lt;/h4&gt;--&gt;
                              &lt;a href="#" class="ca-more"&gt;more...&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="ca-content-wrapper"&gt;
                          &lt;div class="ca-content"&gt;
                              &lt;h6&gt;Collateral damage?&lt;/h6&gt;
                              &lt;a href="#" class="ca-close"&gt;close&lt;/a&gt;
                              &lt;div class="ca-content-text"&gt;
                                  &lt;p&gt;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.&lt;/p&gt;
                                  &lt;!--&lt;p&gt;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;&lt;/p&gt;
                                  &lt;p&gt;She packed her seven versalia, put her initial into the belt and made herself on the way.&lt;/p&gt;--&gt;
                              &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Share this&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Become a member&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ca-item ca-item-8"&gt;
                      &lt;div class="ca-item-main"&gt;
                          &lt;div class="ca-icon"&gt;&lt;/div&gt;
                          &lt;!--&lt;h3&gt;It's time to move on&lt;/h3&gt;
                          &lt;h4&gt;
                              &lt;span class="ca-quote"&gt;&amp;ldquo;&lt;/span&gt;
                              &lt;span&gt;A nation's culture resides in the hearts and in the soul of its people.&lt;/span&gt;
                          &lt;/h4&gt;--&gt;
                              &lt;a href="#" class="ca-more"&gt;more...&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="ca-content-wrapper"&gt;
                          &lt;div class="ca-content"&gt;
                              &lt;h6&gt;Let's finally become humans&lt;/h6&gt;
                              &lt;a href="#" class="ca-close"&gt;close&lt;/a&gt;
                              &lt;div class="ca-content-text"&gt;
                                  &lt;p&gt;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.&lt;/p&gt;
                                  &lt;!--&lt;p&gt;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;&lt;/p&gt;
                                  &lt;p&gt;She packed her seven versalia, put her initial into the belt and made herself on the way.&lt;/p&gt;--&gt;
                              &lt;/div&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Read more&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Share this&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Become a member&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Donate&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;h5&gt;Quotes by Mohandas Gandhi&lt;/h5&gt;
      &lt;/div&gt;
  </code></pre>