linkedin facebook linkedin facebook nod32

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&trade;: 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>

928 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений