جی‌کوئری محصولات برای نمایش طرح بندی

اگر قصد طراحی فروشگاه نمایش محصولات پوشاک را دارید از این جی‌کوئری بی نظیر استفاده کنید . با استفاده از این سورس می توانید پشت و رو لباس را با افکت جالب به نمایش در آورید و یا رنگبندی و سایز محصول را عوض کنید

آموزش استفاده

فراخوانی css و jquery

		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>

html و jquery

		<div class="container">	
			<div id="cbp-pgcontainer" class="cbp-pgcontainer">
				<ul class="cbp-pggrid">
					<li>
						<div class="cbp-pgcontent">
							<span class="cbp-pgrotate">Rotate Item</span>
							<div class="cbp-pgitem">
								<div class="cbp-pgitem-flip">
									<img src="images/1_front.png" />
									<img src="images/1_back.png" />
								</div>
							</div><!-- /cbp-pgitem -->
							<ul class="cbp-pgoptions">
								<li class="cbp-pgoptcompare">Compare</li>
								<li class="cbp-pgoptfav">Favorite</li>
								<li class="cbp-pgoptsize">								
									<span data-size="XL">XL</span>
									<div class="cbp-pgopttooltip">
										<span data-size="XL">XL</span>
										<span data-size="L">L</span>
										<span data-size="M">M</span>
										<span data-size="S">S</span>
									</div>
								</li>
								<li class="cbp-pgoptcolor">
									<span data-color="c1">Blue</span>
									<div class="cbp-pgopttooltip">
										<span data-color="c1">Blue</span>
										<span data-color="c2">Pink</span>
										<span data-color="c3">Orange</span>
										<span data-color="c4">Green</span>
									</div>
								</li>
								<li class="cbp-pgoptcart"></li>
							</ul><!-- cbp-pgoptions -->
						</div><!-- cbp-pgcontent -->
						<div class="cbp-pginfo">
							<h3>Save my trees</h3>
							<span class="cbp-pgprice">$29</span>
						</div>
					</li>
					<li>
						<div class="cbp-pgcontent">
							<span class="cbp-pgrotate">Rotate Item</span>
							<div class="cbp-pgitem">
								<div class="cbp-pgitem-flip">
									<img src="images/2_front.png" />
									<img src="images/2_back.png" />
								</div>
							</div><!-- /cbp-pgitem -->
							<ul class="cbp-pgoptions">
								<li class="cbp-pgoptcompare">Compare</li>
								<li class="cbp-pgoptfav">Favorite</li>
								<li class="cbp-pgoptsize">								
									<span data-size="XL">XL</span>
									<div class="cbp-pgopttooltip">
										<span data-size="XL">XL</span>
										<span data-size="L">L</span>
										<span data-size="M">M</span>
										<span data-size="S">S</span>
									</div>
								</li>
								<li class="cbp-pgoptcolor">
									<span data-color="c2">Pink</span>
									<div class="cbp-pgopttooltip">
										<span data-color="c1">Blue</span>
										<span data-color="c2">Pink</span>
										<span data-color="c3">Orange</span>
										<span data-color="c4">Green</span>
									</div>
								</li>
								<li class="cbp-pgoptcart"></li>
							</ul>
						</div>
						<div class="cbp-pginfo">
							<h3>Nature Lover</h3>
							<span class="cbp-pgprice">$19</span>
						</div>
					</li>
					<li>
						<div class="cbp-pgcontent">
							<span class="cbp-pgrotate">Rotate Item</span>
							<div class="cbp-pgitem">
								<div class="cbp-pgitem-flip">
									<img src="images/3_front.png" />
									<img src="images/3_back.png" />
								</div>
							</div><!-- /cbp-pgitem -->
							<ul class="cbp-pgoptions">
								<li class="cbp-pgoptcompare">Compare</li>
								<li class="cbp-pgoptfav">Favorite</li>
								<li class="cbp-pgoptsize">								
									<span data-size="XL">XL</span>
									<div class="cbp-pgopttooltip">
										<span data-size="XL">XL</span>
										<span data-size="L">L</span>
										<span data-size="M">M</span>
										<span data-size="S">S</span>
									</div>
								</li>
								<li class="cbp-pgoptcolor">
									<span data-color="c3">Orange</span>
									<div class="cbp-pgopttooltip">
										<span data-color="c1">Blue</span>
										<span data-color="c2">Pink</span>
										<span data-color="c3">Orange</span>
										<span data-color="c4">Green</span>
									</div>
								</li>
								<li class="cbp-pgoptcart"></li>
							</ul>
						</div>
						<div class="cbp-pginfo">
							<h3>Forrest Walk</h3>
							<span class="cbp-pgprice">$39</span>
						</div>
					</li>
					<li>
						<div class="cbp-pgcontent">
							<span class="cbp-pgrotate">Rotate Item</span>
							<div class="cbp-pgitem">
								<div class="cbp-pgitem-flip">
									<img src="images/4_front.png" />
									<img src="images/4_back.png" />
								</div>
							</div><!-- /cbp-pgitem -->
							<ul class="cbp-pgoptions">
								<li class="cbp-pgoptcompare">Compare</li>
								<li class="cbp-pgoptfav">Favorite</li>
								<li class="cbp-pgoptsize">								
									<span data-size="XL">XL</span>
									<div class="cbp-pgopttooltip">
										<span data-size="XL">XL</span>
										<span data-size="L">L</span>
										<span data-size="M">M</span>
										<span data-size="S">S</span>
									</div>
								</li>
								<li class="cbp-pgoptcolor">
									<span data-color="c4">Green</span>
									<div class="cbp-pgopttooltip">
										<span data-color="c1">Blue</span>
										<span data-color="c2">Pink</span>
										<span data-color="c3">Orange</span>
										<span data-color="c4">Green</span>
									</div>
								</li>
								<li class="cbp-pgoptcart"></li>
							</ul>
						</div>
						<div class="cbp-pginfo">
							<h3>Land of Trees</h3>
							<span class="cbp-pgprice">$35</span>
						</div>
					</li>
					<li>
						<div class="cbp-pgcontent">
							<span class="cbp-pgrotate">Rotate Item</span>
							<div class="cbp-pgitem">
								<div class="cbp-pgitem-flip">
									<img src="images/3_front.png" />
									<img src="images/3_back.png" />
								</div>
							</div><!-- /cbp-pgitem -->
							<ul class="cbp-pgoptions">
								<li class="cbp-pgoptcompare">Compare</li>
								<li class="cbp-pgoptfav">Favorite</li>
								<li class="cbp-pgoptsize">								
									<span data-size="XL">XL</span>
									<div class="cbp-pgopttooltip">
										<span data-size="XL">XL</span>
										<span data-size="L">L</span>
										<span data-size="M">M</span>
										<span data-size="S">S</span>
									</div>
								</li>
								<li class="cbp-pgoptcolor">
									<span data-color="c3">Orange</span>
									<div class="cbp-pgopttooltip">
										<span data-color="c1">Blue</span>
										<span data-color="c2">Pink</span>
										<span data-color="c3">Orange</span>
										<span data-color="c4">Green</span>
									</div>
								</li>
								<li class="cbp-pgoptcart"></li>
							</ul>
						</div>
						<div class="cbp-pginfo">
							<h3>Tree Shirt</h3>
							<span class="cbp-pgprice">$29</span>
						</div>
					</li>
					<li>
						<div class="cbp-pgcontent">
							<span class="cbp-pgrotate">Rotate Item</span>
							<div class="cbp-pgitem">
								<div class="cbp-pgitem-flip">
									<img src="images/1_front.png" />
									<img src="images/1_back.png" />
								</div>
							</div><!-- /cbp-pgitem -->
							<ul class="cbp-pgoptions">
								<li class="cbp-pgoptcompare">Compare</li>
								<li class="cbp-pgoptfav">Favorite</li>
								<li class="cbp-pgoptsize">								
									<span data-size="XL">XL</span>
									<div class="cbp-pgopttooltip">
										<span data-size="XL">XL</span>
										<span data-size="L">L</span>
										<span data-size="M">M</span>
										<span data-size="S">S</span>
									</div>
								</li>
								<li class="cbp-pgoptcolor">
									<span data-color="c1">Blue</span>
									<div class="cbp-pgopttooltip">
										<span data-color="c1">Blue</span>
										<span data-color="c2">Pink</span>
										<span data-color="c3">Orange</span>
										<span data-color="c4">Green</span>
									</div>
								</li>
								<li class="cbp-pgoptcart"></li>
							</ul>
						</div>
						<div class="cbp-pginfo">
							<h3>Greenhouse</h3>
							<span class="cbp-pgprice">$19</span>
						</div>
					</li>
				</ul><!-- /cbp-pggrid -->
			</div><!-- /cbp-pgcontainer -->
		</div>
		<script src="js/cbpShop.min.js"></script>
		<script>
			var shop = new cbpShop( document.getElementById( 'cbp-pgcontainer' ) ); 
		</script>

6 دیدگاه دربارهٔ «جی‌کوئری محصولات برای نمایش طرح بندی»

javad
می 24, 2013 در 7:30 ق.ظ

Bad nabo0o0od :d

پاسخ
1. mahdi
  می 24, 2013 در 7:31 ق.ظ
  
  مرسی
  
  پاسخ
شکوفه
جولای 13, 2013 در 6:26 ب.ظ

خوب بود
مرسی

پاسخ
1. mahdi
  جولای 14, 2013 در 3:20 ق.ظ
  
  مرسی از نظرتون
  
  پاسخ
hasan
فوریه 26, 2014 در 9:36 ب.ظ

mamnun mohandes jan

پاسخ
1. رضا طاهری
  فوریه 27, 2014 در 12:15 ب.ظ
  
  خواهش می کنم hasan جان
  
  پاسخ

6 دیدگاه دربارهٔ «جی‌کوئری محصولات برای نمایش طرح بندی»

دیدگاه‌ خود را بنویسید لغو پاسخ