زمان کنونی: ۱۱-۱-۱۴۰۳, ۰۲:۰۱ صبح درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
نمایش 360 درجه ای تصاویر با Rollerblade.js
۲۰-۱۰-۱۳۹۴, ۰۴:۲۱ صبح
ارسال: #1
Wink نمایش 360 درجه ای تصاویر با Rollerblade.js
[تصویر:  1452359541_1_fd4f3b9e39.jpg]

نمایش 360 درجه ای تصاویر با پلاگین جی کوئری Rollerblade.js


درود
با Rollerblade.js می توانید تصاویر محصولات یا هر تصویری را بصورت 360 درجه در سایت خود نمایش دهید.روش کار هم راحت است و توضیحات رو در سایت سازنده میتوانید مشاهده کنید.متن توضیحات انگلیسی رو هم قرار داده ام :

The Setup
First, include rollerblade.css at the top of your page with your CSS. Or, since the contents of that file are so small, simply copy and paste the rollerblade.css contents into your main CSS file.

Next: Rollerblade targets a container element with an image element inside that has the class of "rollerblade-img". Make the src of the image the path to the first image in your rotator

<div id="target">
    <img class="rollerblade-img" src="path/to/first/image.jpg">
</div>

و شروع به استفاده :

Initiate
Make sure jQuery is included in your page, and then, inside of a document ready function, select the container element that we specified in the setup and call the rollerblade method. At the very minimum, you have to pass in an array of image urls as a property of the options object. The property must be called 'imageArray'.

Thats it! You will now have a working rollerblade rotator
Just style and position your element to your liking!

Rollerblade.js allows you to create as many rotators on one page as you would like. Just create new elements from our setup step, create a new array of images in your javascript, and call the rollerblade method on another object. Simple!


// You can specify an array of images
    // outside of the rollerblade method,
    // and then pass it in, as so:

    var arrayOfImages = [
        'path/to/image/1.jpg',
        'path/to/image/2.jpg',
        'path/to/image/3.jpg',
        'path/to/image/4.jpg',
        'and/so/on.jpg'
    ];

    $("#target").rollerblade({imageArray:arrayOfImages});

    // OR you can create the array directly in the
    // options object, as so:

    $("#target").rollerblade({imageArray:[
        'path/to/image/1.jpg',
        'path/to/image/2.jpg',
        'path/to/image/3.jpg',
        'path/to/image/4.jpg',
        'and/so/on.jpg'
    ]});

توچه داشته باشید این پلاگین جی کوئری برروی جوملا نصب نمی شود و شما متوانید آن را به ماژول تبدیل کنید و یا با استفاده از افزونه های تزریق یا نمایش کدها در جوملا استفاده کنید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


فایل‌(های) پیوست شده
rollerblade-master.zip
نوع فایل .zip
دفعات دانلود 4
اندازه 6.3 کیلوبایت

امضاء Reza Ganji
انجمن پارس جوم
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط ghasminia ، senobary ، unique33 ، محمدسلیمانی
۲۵-۴-۱۴۰۰, ۰۴:۰۰ عصر
ارسال: #2
RE: نمایش 360 درجه ای تصاویر با Rollerblade.js
ممنون از معرفی
امضاء hirad92
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط armin23
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان