گروه مقاله : مقالات نرم افزار
تاريخ انتشار : 1396/08/03 - 14:26
كد :7911

ایجاد اسلایدر با کمک گالری در وب دیزاینر

در این مقاله شرح کاملی بر سه نوع اسلایدر موجود در کامپوننت گالری نرم افزار وب دیزاینر خواهیم داشت با ما همراه باشید.

در آموزش کامپوننت ها و دسته بندی تگ ها در وب دیزاینر درباره کامپوننت های مختلف بصورت تیتروار صحبت کردیم . در این آموزش به صورت تشریحی عناصر موجود در کامپوننت گالری را بحث می کنیم. در این آموزش بیشتر به نحوه ایجاد اسلاید میپردازیم. بیشتر طراحان سایت برای ایجاد اسلاید های سفارشی با مشکل کد نویسی روبرو میشود این آموزش به این دسته از UI کاران این امکان را میدهد که بتوانند بدون یک خط کد نویس اسلایدر های اختصاصی خود را ایجاد کنند و در نهایت نتیجه کار را با کد های جاوا دریافت کنند. کد های نرم افزار وب دیزاینر در پنل های وردپرس، جوملا و بیشتر پنل های متن باز و تقریبا در همه پنل های اختصاصی asp قابل استفاده است. شما میتوانید با تگ های Php و یا asp کد های خود را ویرایش کنید.

کامپوننت های گالری برای طراحی اسلاید.

The 360° Gallery component :

 گالری 360° به شما امکان میدهد که چندین عکس را بصورت یک ابجکت چرخان نمایش دهیم. بصورت پیشفرض عکس آخر و عکس اول به هم متصل هستند تا کاربر بتواند گالری را در هر دو جهت بچرخاند.

چگونه از گالری 360 درجه در پروژه خود استفاده کنیم

  1. پنل کامپوننت را باز کنید و پوشه گالری را انتخاب کنید.
  2. گالری 360 را به سند خود دراگ کنید.
  3. در قسمت Gallery properties به گالری خود یک نام بدهید.
  4. افزودن عکس به گالری را با متد های زیر میتوانید انجام دهید:
    1. در قسمت Gallery properties روی دکمه Select Gallery images که ایکونی شبیه ایجاد اسلاید با کمک گالری در وب دیزاینر است و در فیلد Images قرار دارد کلیک کنید.
    2. روی دکمه Choose images کلیک کنید تا بتوانید عکس های خود را جستجو کنید. میتوان بجای اینکار عکس ها را به پنجره جستجو دراگ کرد.
    3. در قسمت Gallery properties آدرسی را برای عکس ها اضافه کنید این آدرس ها باید با کما از هم جدا شوند.
  1. تنظیمات بیشتری را اضافه کنید.

برای سفارشی کردن و یا حذف عکس از گالری کارهای زیر را انجام دهید:

  1. در گالری 360 برای افزودن عکس از کلید ایجاد اسلاید با کمک گالری در وب دیزاینر برای افزودن عکس استفاده کنید.
  2. با کمک دراگ کردن عکس ها را در محل دلخواه قرار دهید. برای حذف عکس روی ایکون ایجاد اسلاید با کمک گالری در وب دیزاینر کلیک کنید.
  3. روی OK کلیک کنید.

 

Properties :

ویژگی

توضیحات

Name

نام کامپوننت را تعیین کنید

Images

آدرس عکس ها برای نمایش آنها که با کاما از هم جدا میشوند.

Autoplay

هنگامیکه این گزینه تیک خورده باشد تصاویر بصورت اتوماتیک نمایش داده میشود.

Wrap

وقتی که این تیک را بزنید گالری تمام فضا را احاطه میکند.

 

رخداد ها

رخدادها میتواند به همدیگر ارتباط داشته باشند. گالری 360 Gallery رخداد های زیر را ارسال میکند.

رخداد

توضیحات

First interaction

هنگام اولین تعامل کاربر با گالری ارسال میشود.

All frames viewed

هنگامیکه هرکدام از فریم های گالری حداقل یک بار نمایش داده شده باشند

Images loaded

هنگامیکه تمام عکس های گالری بارگذاری شده باشند.

Frame shown

هنگامیکه هرکدام از فرم های جدید بصورت کامل نمایش داده شود

Frame activated

هنگام تغییر فریم شروع شود. ارسال میگردد

Frame tap

هنگام کلیک شدن فریم ارسال میگردد

اکشن ها

اکشن ها در گالری 360 درجه میتوانند با رخداد ها متصل شوند.

اکشن

گزینه های تنظیمات اکشن

Go to frame

تعداد فریم ها

متحرک : بدون حرکت- اسلاید

جهت چرخش : به جلو یا به عقب

Rotate once

زمان چرخش: زمان به میلی ثانیه

جهت چرخش: به جلو یا به عقب

Go forwards

none

Go backwards

none

 

Preview:

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

 

The Carousel Gallery component:

کامپوننت Carousel Gallery یک اسلایدر با قابلیت چرخیدن ایجاد میکند. با این کامپوننت میتوان با تصاویر ، افکت سه بعدی زیبا ایجاد کرد.

برای استفاده از گالری Carousel در پروژه خود دستورات زیر را اجرا کنید.

  1. در پنل کامپوننت ها پوشه گالری را باز کنید.
  2. کامپوننت Carousel Gallery را به صفحه خود بکشید.
  3. در پنل Carousel Gallery properties نام کامپوننت را مشخص کنید.
  4. به گاری خود یک دسته تصویر یا یک دسته گروه بیافزایید.
    1. برای افزودن عکس به گالری از متد زیر پیروی کنید:
      1. در پنل Carousel Gallery properties روی ایکون Select Gallery images که شبیه ایجاد اسلاید با کمک گالری در وب دیزاینر است کلیک کنید. سپس دکمه  Choose images را زده و یا تصاویر خود را مستقیم بدرون کادر دراگ کنید.
      2. در کادر Images آدرس عکس ها را با کما از هم جدا کنید.
    2. افزودن گروه به گالری:
      1. در قسمت Carousel Gallery properties لیست گروه های خود را با بنویسید و نام هر گروه را با کما از دیگری جدا کنید.
  5. ویژگی های دیگر کامپوننت را سفارشی کنید.

چیدمان و حذف عکس از گالری

  1. برای افزودن عکس از کلید ایجاد اسلاید با کمک گالری در وب دیزاینر برای افزودن عکس استفاده کنید.
  2. با کمک دراگ کردن عکس ها را در محل دلخواه قرار دهید. برای حذف عکس روی ایکون ایجاد اسلاید با کمک گالری در وب دیزاینر کلیک کنید.
  3. روی OK کلیک کنید.

:Properties

ایجاد اسلاید با کمک گالری در وب دیزاینر

 

ویژگی

توضیحات

Name

نام اسلایدر را تعیین میکند.

Images

به شما امکان انتخاب عکس برای استفاده در اسلایدر را میدهد

Groups

با کمک کاما گروه ها را برای استفاده در گالری معرفی می کند.

Transition

زمان بر حسب میلی ثانیه برای انتقال بین عکس ها

Start frame

تعداد عکس ها برای شروع اسلایدر

Autoplay

پخش اتوماتیک اسلایدر

Include navigation

این گزینه برای افزودن ایکون های انتقال به اسلایدر است.

Use thumbnails

وقتی این گزینه تیک خورده باشد. از تصاویر بندانگشتی برای انقال استفاده می کند.

Highlight color

رنگی را برای عکس های بخش انتقال تعیین می کند.

Scaling

تعیین میکند که انواع سایزها نمایش داده شده در یک فریم ثابت به چه میزان باشد.

Resize image to fit: تمام عکس ها در صورت نیاز با اندازه فریم هم سایز می شوند. اگر نسبت عکس و فریم یکی نباشد به عکس پدینگ اضافه میشود و عکس برش نخواهد خورد.

Crop image to fill : اندازه عکس را با فریم یکسان می کند و اگر لازم باشد عکس را برش میدهد.

None : عکس ها در اندازه واقعی نمایش داده میشود. اگر عکس کوچکتر از فریم باشد وسط چین میشود و در صورتی که عکس  بزرگتر از فریم باشد عکس بریده خواهد شد

Stretch image to fill : عکس را بدون توجه به نسبت آن تغییر سایز میدهد ولی عکس را برش نمی دهد.

 

 Advanced properties :

برای نمایش ویژگی های بیشتر روی ایکون ایجاد اسلاید با کمک گالری در وب دیزاینر  در Advanced properties که در پنل کامپوننت قرار دارد کلیک کنید.

Frame width

عرض فریم عکس ها را در گالری برحسب پیکسل مشخص می کند.

Frame height

ارتفاع فریم عکس ها را در گالری برحسب پیکسل مشخص می کند.

Neighbor rotation

مقدار چرخشی که به فریم همسایه اعمال میشود را مشخص می کند.

Neighbor separation

مقدار فاصله بین دو فریم کنارهم را مشخص می کند.

Neighbor vertical offset

ارتفاع فریم همسایه به هنگام نمایش آن را مشخص می کند.

Neighbor scale

میزان اندازه عکس همسایه را مشخص می کند.

Show reflection (WebKit)

هنگامی که این گزینه تیک خورده باشد. انعکاسی از عکس ها را نمایش میدهد. این افکت فقط در مرورگرهای WebKit پشتیبانی میشود.

Pause media when leaving frame

هنگام تغییر عکس در اسلایدر مدیاهای اسلاید قبلی را متوقف می کند.

Resume media when entering frame

اگر این گزینه تیک خورده باشد. ویدئو های اسلاید فعلی را پخش میکند.

 

Events:

رخدادهایی در گالری Carousel وجود دارند را در لیست زیر مشاهده می کنید.

رخداد

توضیحات

First interaction

رخداد اولین تعامل کاربر با گالری را تعیین می کند.

All frames viewed

این رخداد در زمانی که همه عکس ها حداقل یکبار به نمایش در آمده باشند،اجرا میشود.

Images loaded

هنگامیکه تمام عکس های گالری بازگذاری شوند این رخداد اتفاق می افتد

Frame shown

درهنگامی که یک فریم جدید نمایش داده شود. این رخداد ارسال میشود.

Frame activated

هنگامی که تغییر فریم شروع میشود این رخداد ارسال میگردد.

Frame tap

هنگامی که فریم کلیک شود این رخداد ارسال میگردد.

Left end

هنگامی که گالری به آخرین عکس از سمت چپ برسد این رخداد ارسال میشود.

Right end

هنگامی که گالری به آخرین عکس از سمت چپ برسد این رخداد ارسال میشود.

 

اکشن ها

اکشن های زیر را بعد از ارسال رخداد های فوق میتوان برنامه ریزی کرد.

اکشن

گزینه های تنظیمی

Go to frame

Index

Animate - "none" or "slide"

Go forwards

Animate - "none" or "slide"

Go backwards

Animate - "none" or "slide"

Rotate once

زمان چرخش به میلی ثانیه .

جهت چرخش به جلو یا عقب

Stop rotation

none

نمایش نتیجه:

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

The Gallery Navigation component :

این کامپوننت به شما امکان میدهد که به کامپوننت های Swipeable Gallery, Carousel Gallery,   360° Gallery  یک Navigation اضافه کنید.

ایجاد اسلاید با کمک گالری در وب دیزاینر

ایجاد اسلاید با کمک گالری در وب دیزاینر

ما در تصاویر بالا دو نوع Navigation یکی با ایکون و یکی با عکس بند انگشتی را نشان داده ایم.

چگونه به گالری های خود Navigation اضافه کنیم:

  1. در پنل کامپوننت پوشه گالری را باز کنید.
  2. گزینه Gallery Navigation را به سند خود دراگ کنید.
  3. در قسمت Navigation properties ویژگی های این کامپوننت را تنظیم کنید.

تنظیمات کامپوننت Navigation :

ویژگی

توضیح

Name

نام گالری را تعیین کنید.

Gallery ID

مشخص کنید که کدامیک از گالری های Swipeable Gallery, Carousel Gallery,   360° Gallery  را میخواهید کنترل کنید.

Highlight color

رنگی را برای ایکون ها و عکس های بندانگشتی و یا گروه ها انتخاب کنید.

Use thumbnails

هنگامی که این گزینه تیک خورده باشد. عکس های بند انگشتی بجای ایکون نمایش داده میشود.

 

نمایش نتیجه:

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

 

The Swipeable Gallery component

گالری Swipeable بسیار شبیه گالری The Carousel Gallery component میباشد. این اسلایدر تصاویر را به جلو و عقب می برد.

نحوه استفاده از گالری Swipeable

  1. از پنل Components پوشه گالری را انتخاب کنید
  2. گالری Swipeable را به درون صفحه خود دراگ کنید.
  3. در قسمت Gallery properties نام کامپوننت را مشخص کنید.
  4. به گاری خود یک دسته تصویر یا یک دسته گروه بیافزایید.
    1. برای افزودن عکس به گالری از متد زیر پیروی کنید:
      1. در پنل Carousel Gallery properties روی ایکون Select Gallery images که شبیه ایجاد اسلاید با کمک گالری در وب دیزاینر است کلیک کنید. سپس دکمه  Choose images را زده و یا تصاویر خود را مستقیم بدرون کادر دراگ کنید.
      2. در کادر Images آدرس عکس ها را با کما از هم جدا کنید.
    2. افزودن گروه به گالری:
      1. در قسمت Carousel Gallery properties لیست گروه های خود را با بنویسید و نام هر گروه را با کما از دیگری جدا کنید.
  5. ویژگی های دیگر کامپوننت را سفارشی کنید.

چیدمان و حذف عکس از گالری

  1. برای افزودن عکس از کلید ایجاد اسلاید با کمک گالری در وب دیزاینر برای افزودن عکس استفاده کنید.
  2. با کمک دراگ کردن عکس ها را در محل دلخواه قرار دهید. برای حذف عکس روی ایکون ایجاد اسلاید با کمک گالری در وب دیزاینر کلیک کنید.
  3. روی OK کلیک کنید.

 

Properties:

ایجاد اسلاید با کمک گالری در وب دیزاینر

 

ویژگی

توضیح

Name

نام اسلایدر را تعیین می کند.

Images

عکس های اسلایدر را انتخاب می کند.

Groups

با کمک کاما چندین گروه را برای استفاده در گالری تعیین میکند.

Transition

زمان انتقال بین اسلایدر ها برحسب میلی ثانیه را نشان میدهد

Start frame

تعداد عکس که میخواهید در فریم نمایش دهید را تعیین می کند.

Show frames

تعداد فریم های نمایش داده شده در گالری در یک زمان را تعیین می کند.

Swipe frames

تعداد فریم هایی که نوع swipe خاصی دارند را تعیین می کند.

Autoplay

اسلاید بصورت آتوماتیک نمایش داده میشود.

Include navigation

به اسلایدها یک navigation اضافه می کند.

Use thumbnails

از عکس بند انگشتی بجای navigation استفاده می کند.

Highlight color

تنظیم رنگ برای عکس های بند انگشتی .

Scaling

تعیین میکند که انواع سایزها نمایش داده شده در یک فریم ثابت به چه میزان باشد.

Resize image to fit: تمام عکس ها در صورت نیاز با اندازه فریم هم سایز می شوند. اگر نسبت عکس و فریم یکی نباشد به عکس پدینگ اضافه میشود و عکس برش نخواهد خورد.

Crop image to fill : اندازه عکس را با فریم یکسان می کند و اگر لازم باشد عکس را برش میدهد.

None : عکس ها در اندازه واقعی نمایش داده میشود. اگر عکس کوچکتر از فریم باشد وسط چین میشود و در صورتی که عکس  بزرگتر از فریم باشد عکس بریده خواهد شد

Stretch image to fill : عکس را بدون توجه به نسبت آن تغییر سایز میدهد ولی عکس را برش نمی دهد.

Direction

چهت چرخش را بصورت عمودی و افقی تعیین می کند.

 

تنظیمات بیشتر

برای نمایش ویژگی های بیشتر روی ایکون ایجاد اسلاید با کمک گالری در وب دیزاینر  در Advanced properties که در پنل کامپوننت قرار دارد کلیک کنید.

ویژگی

توضیحات

Frame offset

فاصله بین دو عکس.

Frame width

عرض فریم عکس به پیکسل

Frame height

ارتفاع فریم عکس به پیکسل

Autoplay duration

زمان بر حسب میلی ثانیه برای پخش گالری از اولین عکس تا آخرین عکس

Autoplay step interval

این زمان کلی نمایش اسلاید است برای رسیدن به این زمان اگر لازم باشد اسلاید شو چندین بار تکرار میشود.

Exit URLs

لیست آدرس ها که با کما از هم جدا میشوند.

Disable swipe

مانع کشیده شدن عکس های گالری میشود

Pause media when leaving frame

مدیا ها را در هنگام عبور از اسلاید متوقف می کند.

Resume media when entering frame

مدیاها را در هنگام ورود به یک اسلاید مجدد پخش می کند.

رخداد ها

در اسلایدر  Swipeable رخدادهای زیر قابل برنامه ریزی هستند.

رخداد

توضیحات

First interaction

رخداد اولین تعامل کاربر با گالری را تعیین می کند.

All frames viewed

این رخداد در زمانی که همه عکس ها حداقل یکبار به نمایش در آمده باشند،اجرا میشود.

Images loaded

هنگامیکه تمام عکس های گالری بازگذاری شوند این رخداد اتفاق می افتد

Frame shown

درهنگامی که یک فریم جدید نمایش داده شود. این رخداد ارسال میشود.

Frame activated

هنگامی که تغییر فریم شروع میشود این رخداد ارسال میگردد.

Frame tap

هنگامی که فریم کلیک شود این رخداد ارسال میگردد.

Left end

هنگامی که گالری به آخرین عکس از سمت چپ برسد این رخداد ارسال میشود.

Right end

هنگامی که گالری به آخرین عکس از سمت چپ برسد این رخداد ارسال میشود.

Mouse over a frame

این رخداد با هاور موس ارسال میشود.

Mouse out of a frame

این رویداد با خروج موس از اسلایدر ارسال میشود.

اکشن ها

اکشن های زیر را بعد از ارسال رخداد های فوق میتوان برنامه ریزی کرد.

اکشن

گزینه های تنظیمی

Go to frame

Frame number

Animate - "none" or "slide"

Rotate once

زمان چرخش به میلی ثانیه .

جهت چرخش به جلو یا عقب

Stop rotation

None

Go forwards

none

Go backwards

none

نمایش نتیجه:

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

 

 

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد

نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*