Ask your WordPress questions! Pay money and get answers fast!

jQuery Content Slider with Multiple Posts WordPress

SOLVED

Please take a look at code below:

<div id="slidewindow"> <div class="jflow-content-slider"> <div id="slides">  <div class="slide-wrapper"> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="clear"></div> </div>  <div class="slide-wrapper"> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="clear"></div> </div>  <div class="slide-wrapper"> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="clear"></div> </div>  <div class="slide-wrapper"> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="clear"></div> </div>  <div class="slide-wrapper"> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="slide-thumbnail"> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/rings/1_tumb.jpg" alt="Slider number three" /></a><br/> <div class="slide-details"><strong>Metro horseshoe</strong><br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p></div></div> <div class="clear"></div> </div> </div> <div id="myController"> prev  <span class="jFlowPrev"></span> <span class="jFlowControl"></span> <span class="jFlowControl"></span> <span class="jFlowControl"></span> <span class="jFlowControl"></span> <span class="jFlowControl"></span> <span class="jFlowNext"></span>   next </div> <div class="clear"></div> </div> </div> 

How to integrate jQuery slider with multiple posts into wordpress?

2011-04-29 by Ferdian Alfianto

Answers (3)

2011-04-29

Christianto answers:

Memangnya slider contentnya dapet darimana? Post category atau admin option...
Jika pakai jFlow sy nggak tahu apa slider dan controlnya bisa jalan jika dipisah semacam itu.. harusnya mungkin dalam satu wrapper, solusinya pakai ID bukan class jadi satu2 initializenya.

Sorry bahasa sy kurang bagus, hore...

Ferdian Alfianto comments:

Coba lihat halaman ini gan --> http://www.redhead.web.id/lab/menrings.html

Htmlnya udah bagus, jalan dengan sempurna, cuma bingung implementasi ke wordpress. Karena beberapa posts harus diletakkan kedalam <div class="slide-wrapper"> secara terpisah. Ada solusi gak bos?

Christianto comments:

Jadi mau bikin scroll content, sy kira mau buat banyak slider dlm satu page.

Bisa gan, nanti dibikin loop trus untuk div .slider-wrapper dibuat variable yg tiap loop nambah 1 dan klo udah 8 content output loopnya diecho slider wrapper htmlnya, lalu variablenya direset.

untuk html controlnya di iteration, jadi harus buat variable lagi sebagai nilai maximumnya, variablenya nambah 1 tiap loop selesai, jadi ketahuan berapa loop postnya.

Gambarnya dapat dari postmeta apa featured image?
Terus detail tiap post ini dapet dari mana, post meta juga apa dari post contentnya? Codenya agan ada yg salah, tag 'p' nggak cuman sediri nggak ada pasanganya.. hehe
<div class="slide-details"> Metro horseshoe<br/> Ring in 18k white gold with diamonds, mini.<br/> $700<br/><br/> <a href="img/rings/1.jpg" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </p> </div>

Ferdian Alfianto comments:

Yup betul gan, ane mo bikin scroll content.

Gambar ntar ambil dari postmeta aja. Detail juga dari post meta.

Hehehe...iya kurang tag P, agan jeli juga.

Btw, full code nya gimana gan? ane gak begitu ngarti php, tulungin dong gan kasih codenya kayak om David diatas :)

Christianto comments:

Ini kita ngomong nggak pake bhs inggris blh nggak ya..

Ini gan, blum ane test, beritahu saya klo berhasil atau error ^_^

Yg agan harus ganti variable $sc_cat, sesuaikan sama kategory id agan,

Untuk post meta (custom field) buat di post editornya nama post metanya 'thumb_image' untuk gambar agan, dan 'description' untuk html deskripsi agan (tanpa tnda kutip).

jgn lupa yah di vote ya, sama kali aja ada proyek lain he..he..

<div id="slidewindow"> <div class="jflow-content-slider"> <div id="slides"> <?php /* @Param - $sc_cat, parameter untuk post category, bisa diambil dari option pakai get_option() dan di define langsung. - $ite_main, parameter untuk ngebungkus post dgn <div class="slider-wrapper"> pada saat post sudah ada 8. - $ite_cont, parameter untuk jumlah max iteration di HTML controlnya. */ $sc_cat = ''; $ite_main = 1; $ite_cont = 1; $sc = new WP_Query("cat=$sc_cat&posts_per_page=-1"); if($sc->have_posts()) : while($sc->have_posts()) : $sc->the_post(); $thumbimage = get_post_meta($post->ID,'thumb_image', true); $description = get_post_meta($post->ID,'description', true); ?>  <?php if($ite_main == 1) echo '<div class="slide-wrapper">'; ?> <div class="slide-thumbnail"> <a href="<?php echo $thumbimage ?>" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="<?php echo $thumbimage ?>" alt="Slider number <?php echo $ite_cont;?>" /> </a> <br/> <div class="slide-details"> <?php echo $description; ?> </div> </div>  <?php if($ite_main == 8) { echo '<div class="slide-wrapper">'; $ite_main = 0; } // nambah satu nilai variablenya $ite_main++; $ite_cont++; endwhile; endif; ?> </div> <div id="myController"> prev  <span class="jFlowPrev"></span>  <?php for($i=1;$i<=$ite_cont;$i++){ ?><span class="jFlowControl"></span><?php } ?> <span class="jFlowNext"></span>   next </div> <div class="clear"></div> </div> </div>

Ferdian Alfianto comments:

Ok gan, ane sholat jumat dulu. Abis sholat ane coba codenya.

Btw, agan nrima order custom programming? ane ada proyek lagi gan, butuh bantuan php programmer. Kebetulan ane masih oon dengan dunia php :) kalo cocok boleh lah kita kerjasama gan :D

Christianto comments:

Gimana dah bisa?

Boleh aja asal ane ada waktu..
Klo ane cuma specific WP ama jQuery aja.. klo php sampai dalem2 ngeri juga he..he.. :D

Ferdian Alfianto comments:

Ane butuh waktu gan :D tapi dari percobaan awal sih berhasil, tapi harus diutak-atik dikit nih. Ane mo keluar dulu, ntar malem ane kasih kabarnya ya gan.

Christianto comments:

Silakan, mau ntar malem atau 2 hari lagi nggak apa2 kok...

Nggak bayar perjam ini khan...hehe :D

Ferdian Alfianto comments:

Bos, ini coba aku ubah dikit kodenya agar bisa menyesuaikan ke theme nya, hingga menjadi

<?php /* @Param - $sc_cat, parameter untuk post category, bisa diambil dari option pakai get_option() dan di define langsung. - $ite_main, parameter untuk ngebungkus post dgn <div class="slider-wrapper"> pada saat post sudah ada 8. - $ite_cont, parameter untuk jumlah max iteration di HTML controlnya. */ $sc_cat = '4'; $ite_main = 1; $ite_cont = 1; $sc = new WP_Query("cat=$sc_cat&posts_per_page=-1"); if($sc->have_posts()) : while($sc->have_posts()) : $sc->the_post(); $thumbimage = get_post_meta($post->ID,'thumb_image', true); $bigimage = get_post_meta($post->ID,'bigimage', true); $description = get_post_meta($post->ID,'description', true); $price = get_post_meta($post->ID,'price', true); ?>  <?php if($ite_main == 1) echo '<div class="slide-wrapper">'; ?> <div class="slide-thumbnail"> <a href="<?php echo $bigimage ?>" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="<?php echo $thumbimage ?>" alt="Slider number <?php echo $ite_cont;?>" /> </a> <br/> <div class="slide-details"><strong><?php the_title(); ?></strong><br /> <?php echo $description; ?><br /> <?php echo $price; ?><br /><br /> <a href="<?php echo $bigimage ?>" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="<?php echo home_url( '/' ); ?>wp-content/themes/platino/img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="<?php echo home_url( '/' ); ?>wp-content/themes/platino/img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </div> </div>  <?php if($ite_main == 8) { echo '<div class="slide-wrapper">'; $ite_main = 0; } // nambah satu nilai variablenya $ite_main++; $ite_cont++; endwhile; endif; ?> test </div> <div id="myController"> prev  <span class="jFlowPrev"></span>  <?php for($i=1;$i<=$ite_cont;$i++){ ?><span class="jFlowControl"></span><?php } ?> <span class="jFlowNext"></span>   next </div> <div class="clear"></div> </div> </div> 

Nah, ada masalah dikit yang ingin ane tanyakan. Pada
$sc_cat = '4';
Ini apa harus dimasukkan manual variabelnya? Apa gak bisa otomatis?

Dan disetiap post sudah mencapai 8, harus ada penutup tag tambahan
<div class="clear"></div> </div>
Dimana meletakkan nya bos?

Mungkin itu aja bos, mohon bantuannya ya gan ;)

Christianto comments:

sorry gan, ane dah bobo waktu agan nanya..

untuk $sc_cat itu terserah agan, klo agan mau otomatis lewat backend bisa lewat get_option() klo memang agan bisa setup optionnya di admin panel backendnya. Atau bisa juga pakai get_post_meta() tapi agak ribet krn setiap mau edit harus ke post yg bersangkutan buat edit customs fieldnya.

Agan bikin theme ini sendiri apa udah pake theme orang?

Untuk kodenya ada revisi sedikit, klo postnya berhenti di selain post yg ke-8 harus ditutup, sama ada slh yg lainnya. Untuk tag tambahan untuk penutupnya <div class="clear"> nya ane udah masupin juga..

ini gan codenya, dicoba ya gan
<div id="slidewindow"> <div class="jflow-content-slider"> <div id="slides"> <?php /* @Param - $sc_cat, parameter untuk post category, bisa diambil dari option pakai get_option() dan di define langsung. - $ite_main, parameter untuk ngebungkus post dgn <div class="slider-wrapper"> pada saat post sudah ada 8. - $ite_cont, parameter untuk jumlah max iteration di HTML controlnya. */ $sc_cat = '4'; $ite_main = 1; $ite_cont = 1; $sc = new WP_Query("cat=$sc_cat&posts_per_page=-1"); if($sc->have_posts()) : while($sc->have_posts()) : $sc->the_post(); $thumbimage = get_post_meta($post->ID,'thumb_image', true); $bigimage = get_post_meta($post->ID,'bigimage', true); $description = get_post_meta($post->ID,'description', true); $price = get_post_meta($post->ID,'price', true); ?>  <?php if($ite_main == 1) echo '<div class="slide-wrapper">'; ?> <div class="slide-thumbnail"> <a href="<?php echo $bigimage ?>" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="<?php echo $thumbimage ?>" alt="Slider number <?php echo $ite_cont;?>" /> </a> <br/> <div class="slide-details"><?php the_title(); ?><br /> <?php echo $description; ?><br /> <?php echo $price; ?><br /><br /> <a href="<?php echo $bigimage ?>" rel="lightbox-rings" title="Beautiful, isn't it?"> <img src="<?php echo home_url( '/' ); ?>wp-content/themes/platino/img/zoom.png" width="10" height="10" /> View Item Details</a><br/> <a href=""><img src="<?php echo home_url( '/' ); ?>wp-content/themes/platino/img/bag.png" width="10" height="10" /> Add to Shopping Bag</a> </div> </div>  <?php if($ite_main == 8) { echo '<div class="clear"></div></div>'; $ite_main = 0; } // nambah satu nilai variablenya $ite_main++; $ite_cont++; endwhile; endif; if($ite_main != 0) echo '<div class="clear"></div></div>'>; ?> test </div> <div id="myController"> prev  <span class="jFlowPrev"></span>  <?php for($i=1;$i<=$ite_cont;$i++){ ?><span class="jFlowControl"></span><?php } ?> <span class="jFlowNext"></span>   next </div> <div class="clear"></div> </div> </div>

Ferdian Alfianto comments:

Gan, code yang ini
if($ite_main != 0) echo '<div class="clear"></div></div>'>;

koq dibilang syntax error ya sama dreamweaver?

Christianto comments:

Wordpress/php parsingnya error nggak..?

Klo dreamweaver cuman ngecek closing html syntax aja kayaknya, soalnya ada dua <div class="clear"></div></div> yg dreamweaver nggak cek itu 2-2nya ada di dalem php logic jadi nggak dioutput 2-2nya, cuma 1 tergantung kondisinya.

Ferdian Alfianto comments:

Jadi keluar kayak begini gan