Slayder uchun rasmlarni 360 gradusga burish

Muallif: Mengliyev SH.

Qo`shilgan sana: 2015-04-15

Slayder uchun rasmlarni 360 gradusga burish

Bugun biz slayderlarning qanday ishlash tartibini yoki ularning tovar 360 gradusini ko’ramiz.
Misol:
Javascript
window.onload = init;

var product;
functioninit(){

product1 = $('.product1').ThreeSixty({
totalFrames: 72, // Общее число кадров
endFrame: 72, // конечный кадр
currentFrame: 1, // с какого кадра стартовать
imgList: '.threesixty_images', // селектор изображений
progress: '.spinner', // селектор элемента процесса загрузки
imagePath:'assets/product1/', // путь к папке с изображениями
filePrefix: 'ipod-', // префикс файлов
ext: '.jpg', // формат изображения
height: 265,
width: 400,
navigation: true,
disableSpin: true
});
}
HTML
<div class="threesixty product1">
<div class="spinner">
<span>0%</span>
</div>
<ol class="threesixty_images"></ol>
</div>
Sozlanmadan plaginni har bitta produkt uchun alohida ko’rsatilishi shart.

Sozlanma.
Usul.
Slayderning yozilish usuli.

Метод	yozuv
.play()	Avto qo’shish
.stop()	Slayderni toxtatish
.next()	Keyingi sahifaga aylantirish
.previous()	Aylantirish o’tgan sahifaga
.gotoAndPlay()	Kerkli kadrga o’tish

Конфигурация

O’tish paramatrlari
totalFrames	180	Number	Umumiy kadrlar soni
currentFrame	1	Number	Qaysi kadrni tanlash
endFrame	180	Number	Tugallanish kadri
framerate	60	Number	Kadrlar soni sekund ko’rsatish
filePrefix	''	String	Fayldagi rasmni ko’rsatish
ext	png	String	Ko’rsatish formati
height	300	Number	Konteyner balandligi
width	300	Number	Konteyner uzinligi
style	{}	Object	Ko’rinishi jQuery.css({})
navigation	true	Boolean	false – kerak emas aylanmalar
autoplayDirection	1	Number	Yo’nalish slayderi. 1 или -1
dragging	true	Boolean	false, kerak emas aylanmalar
disableSpin	false	Boolean	O’chiring
zeroPadding	false	Boolean	true uchun uchun OPX ichki chek qo’yish
responsive	false	Boolean	Moslashtirish.

misol uchun quyida keltirilgan

title>Magic 360™: 360 spin</title>

<link rel="stylesheet" type="text/css"

href="magic360/magic360.css" />

<script type="text/javascript" src="magic360/magic360.js"></script>

</head>
<body>

<p> Single row spin from left to right.</p>
<a class="Magic360" href="images/shoe/shoe-800-01.jpg" data-magic360-options="filename: shoe-360-{col}.jpg;
large-filename: shoe-800-{col}.jpg;"><img src="images/shoe/shoe-360-01.jpg"/></a>

</body>

2328 marta o`qildi.

shoydullo adminstrator