آموزش ساخت گالری تصاویر برای وب سایت خود

استفاده از عناصری گرافیکی و طراحی بصری اغلب برای موفقیت حضور در اینترنت ضروری است و برای وبلاگ ها و فروشگاه های اینترنتی نیز به همان اندازه مهم است. در حالی که برای مدیران وب سایت ها بسیار حیاتی است که به طور پیوسته شعار "محتوا پادشاه است" را رعایت کنند و بر ایجاد محتوای مؤثر تأکید کنند، اما جنبه های بصری وب سایت هرگز نباید نادیده گرفته شود.

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

گالری تصاویر، روشی محبوب برای ادغام تصاویر در یک وب سایت هستند که به کاربران اجازه می دهد چندین تصویر را به طور همزمان مشاهده کنند. چندین روش مختلف برای تولید نمایش اسلاید مانند چنین تصاویری وجود دارد، از جمله جاسازی یک گالری Lightbox ساده در وب سایت خود با کد منبع با پیاده سازی گالری عکس از طریق کدهای HTML.

روش دیگر، و حتی ساده تر، استفاده از یک سیستم مدیریت محتوای محبوب است. برای انجام این کار با سیستمی مانند TYPO3 یا WordPress، کاربران فقط باید افزونه مناسب را پیدا کنند و آن را در چارچوب اصلی نصب کنند.

فهرست مطالب

جاسازی یک گالری تصاویر Lightbox
افزونه های گالری تصویر برای سیستم های مدیریت محتوا
گالری تصاویر برای وردپرس
گالری تصاویر جوملا
گالری تصاویر برای TYPO3

جاسازی یک گالری تصاویر Lightbox

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

این نوع لایت باکس را می توان به راحتی در یک وب سایت جاسازی کرد و با عملکردهای بیشتر گسترش داد. برای ایجاد یک گالری تصویر، کاربران نیاز به نسخه فعلی لایت باکس و البته تمام تصاویر (از جمله تصاویر کوچک و بند انگشتی) دارد که باید در سایت تعبیه شود.

اولین نسخه لایت باکس توسط لوکش داکار در سال 2005 ساخته شد و مدت کوتاهی بعد نسخه ای از آن تحت مجوز Creative Commons در دسترس عموم قرار گرفت. از آن زمان تاکنون، لایت باکس چندین نسخه و به روز رسانی را پشت سر گذاشته است، از جمله این به روز رسانی ها می توان به ارائه نسخه standalone و پلاگین هایی برای کتابخانه های جاوا اسکریپت و برنامه های افزودنی برای سیستم های مدیریت محتوا اشاره کرد.

1. دانلود لایت باکس

اسکریپت لایت باکس از طریق وب سایت Lokesh Dhakar به رایگان برای دانلود در دسترس است. پس از باز کردن بسته بندی فایل .zip، فایل های زیر را درون آن خواهید یافت: یک فایل index.html و سه پوشه به نام‌های css، images و js.

2. جاسازی فایل های CSS و جاوا اسکریپت

فایل lightbox.css را از پوشه CSS در پوشه CSS وب سایت خود و پوشه js. را در پوشه جاوا اسکریپت وب سایت خود کپی کنید. سپس باید کد زیر را در هدر وب سایت خود وارد کنید:

<link href="your-css-directory/lightbox.css" rel="stylesheet">

کد زیر باید در آخرین خط، قبل از تگ درج شود.

<script src="your-js-directory/lightbox.js"></script>

هشدار: Lightbox به jQuery نیاز دارد. اگر قبلا جاسازی و بارگذاری نشده است، باید قبل از کار با اسکریپت لایت باکس، این کار را انجام دهید.

3. ویژگی لایت باکس برای جاسازی یک گالری عکس با HTML

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

هر لینک به تصویر باید دارای ویژگی data-lightbox و یک نام سفارشی برای هر گالری باشد. تصاویری که قرار است در یک نمایش اسلاید، نمایش داده شوند، همگی به ویژگی data-lightbox نیاز دارند. برای عنوان یا نام عکس ها، از ویژگی data-title با متن مربوطه استفاده کنید.

مثالی از یک گالری تصویر با یک عکس:

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="caption">
 <img src="images/image-1-preview.jpg" alt="alternative explanation"> 
</a>

مثالی از یک گالری تصویر با چندین عکس:

<a href="images/image-2.jpg" data-lightbox="show-1" data-title="morning"><img src="images/image-2-preview.jpg" alt="alternative explanation"></a>

<a href="images/image-3.jpg" data-lightbox="show-1" data-title="midday"><img src="images/image-3-preview.jpg" alt="alternative explanation"></a> 

<a href="images/image-4.jpg" data-lightbox="show-1" data-title="evening"><img src="images/image-4-preview.jpg" alt="alternative explanation"></a>

لایت باکس اکنون در وب سایت شما تعبیه شده است. البته، امکانات بیشتری برای سفارشی کردن نمایش اسلاید یا نمایش لایت باکس وجود دارد. می‌توانید این کار را با انتخاب «پارامترهای متد option» و وارد کردن مقادیر مربوطه پس از بارگذاری اسکریپت انجام دهید.

مثال:

<script src="your-js-directory/lightbox.js"></script> 
<script> 
lightbox.option({ 'resizeDuration': 200, 'wrapAround': true }); 
</script>

نیاز به کمک یا مشاوره دارید؟ با شماره 77637159-021 تماس بگیرید. ما آماده پاسخگویی هستیم!

مهم ترین گزینه ها در یک نگاه:

گزینه	استاندارد	شرح
alwaysShowNavOnTouchDevices		استاندارد true را با مقدار داده شده جایگزین می کند و باعث می‌شود فلش‌ها و پیکان های ناوبری، در دستگاه‌هایی که دارای صفحه نمایش لمسی هستند، قابل مشاهده شوند. به طور پیش فرض، این پیکان ها فقط زمانی ظاهر می شوند که کاربران با ماوس پیمایش کنند.
disableScrolling		تغییر پارامتر به true به این معنی است که وقتی لایت باکس باز است، پیمایش در صفحه، امکان پذیر نیست.
fadeDuration	"500"	در اینجا، کاربران می‌توانند تعیین کنند که چه مدت طول می‌کشد تا fade-in و fade-out کامل شود. (حسب میلی ثانیه).
maxWidth		برای تعیین حداکثر عرض تصویر (مقداری بر حسب پیکسل) مقداری را در اینجا وارد کنید.
maxHeight		برای تعیین حداکثر ارتفاع تصویر (مقدار بر حسب پیکسل) مقداری را در اینجا وارد کنید.
positionfromTop	"50"	برای تعیین حداکثر ارتفاع تصویر (مقدار بر حسب پیکسل) مقداری را در اینجا وارد کنید.
resizeDuration	"700"	با استفاده از این مقدار، می توانید مدت زمان انتقال سایز، بین دو تصویر مختلف با اندازه های مختلف (زمان بر حسب میلی ثانیه) را تعیین کنید.
showImageNumberLabel	"true"	با تغییر آن به false، تعداد کل تصاویر در نمایش اسلاید پنهان می شود (به عنوان مثال، نمایش تصویر 3 از 33).
wrapAround		با تغییر این گزینه به true، نمایش اسلاید پس از آخرین تصویر به ابتدا باز می گردد.

برنامه های دیگری نیز برای جاسازی گالری عکس های در وب سایت شما وجود دارد. این ابزارها به طور کلی بسیار ساده هستند و به طور مستقیم و مستقل کار می کنند و اکثر آنها یک ویرایشگر از نوع کشیدن و رها کردن را ارائه می دهند. می توانید مجموعه ای از گزینه های لایت باکس را در اینجا بیابید.

افزونه های گالری تصاویر برای سیستم های مدیریت محتوا

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

علاوه بر عملکرد بصری و رابط کاربری کاربر پسند، بسیاری از کاربران به ساختار انعطاف پذیر سیستم هایی مانند جوملا، وردپرس یا Typo3 نیز اهمیت می دهند. ساختارهای ماژولار این CMS ها اجازه می دهد تا چارچوب های آنها، بسط داده شود و مطابق با نیازهای شخصی، تنظیم شوند.

این به لطف جامعه بزرگی که اغلب پشت ایجاد چنین سیستم‌های منبع باز و افزونه‌های آن‌ها هستند، امکان‌پذیر شده است. این انجمن ها همچنین مسئول ایجاد بسیاری از برنامه‌های افزودنی هستند که به شما امکان می‌دهد گالری های تصاویر خود را بسازید و آنها را در سایت خود جاسازی کنید.

ما راه حل هایی را برای CMS های محبوب، نظیر وردپرس، جوملا و TYPO3 به شما ارائه خواهیم داد.

گالری های تصاویر برای وردپرس

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

با وجود این پیشرفت های عظیم، این پلتفرم هنوز برای انواع پروژه های وبلاگ نویسی استفاده می شود. در موضوعاتی نظیر دنیای مد، سبک زندگی و زیبایی، زیبایی در طراحی سایت از اهمیت بالایی برخوردار است.

پس جای تعجب نیست که از 18000 افزونه ای که وردپرس به آن می بالد، بیش از تعداد کمی از آنها برای ساخت گالری تصاویر باشند.

گالری تصویر NextGen

گالری تصاویر NextGen یکی از معروف ترین افزونه ها برای وردپرس است. با NextGen، نه تنها امکان ایجاد گالری تصاویر کوچک، بلکه نمایش اسلاید نیز وجود دارد.

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

کاربر می تواند مهمترین پارامترها مانند اندازه، تعداد و فاصله را انتخاب کند و با کلیک یک دکمه می توانند واترمارک ها را نیز به تصاویر اضافه کند.

به طور خاص، مزیت رقابتی NextGen قابلیت استفاده و رابط کاربری کاملا ساختار یافته آن است. نسخه رایگان گالری NextGen برای دانلود از فهرست پلاگین های وردپرس در دسترس است. همچنین می توانید نسخه های پلاس و حرفه ای نرم افزار را از وب سایت توسعه دهنده آن خریداری کنید.

نسخه حرفه ای این افزونه، ویژگی‌های اضافی را برای استفاده در گالری تصاویر ارائه می‌دهد، که شامل عملکردهای جالبی برای اهداف فروشگاه های اینترنتی است.

گالری Envira

با استفاده از افزونه Envira Gallery (Lite)، کاربران می‌توانند گالری‌ تصاویر برای وب‌سایت‌های خود بسازند، از جمله: گالری‌های جداگانه برای پست‌ها و صفحات منفرد، و همچنین گالری‌هایی از نوع استاندارد.

این افزونه ریسپانسیو توسط شرکت Envira ایجاد شده است و گالری ها و همچنین لایت باکس ها را پیاده سازی می کند. چیزی که Envira را خاص می‌کند این واقعیت است که این برنامه محتوای تصاویر را به‌صورت ناهمزمان بارگیری می‌کند، بنابراین شما مجبور نیستید در مورد زمان و عملکرد بارگیری - حتی با فرمت‌های تصاویر بزرگ، تغییراتی را در کدهای وب سایت خود انجام دهید.

بنابراین Envira از دیدگاه سئو نیز استفاده از این افزونه، دارای مزایایی است، زیرا زمان بارگذاری یک عامل رتبه بندی مهم برای بسیاری از موتورهای جستجوگر است.

نسخه رایگان Envira Gallery Lite برای دانلود از فهرست پلاگین های وردپرس در دسترس است. نسخه های توسعه یافته این افزونه که رایگان نمی باشند، آپشن هایی برای اشتراک گذاری در شبکه های اجتماعی، ویژگی های سئو و متدهای فروشگاهی را ارائه می دهند.

گالری پولاروید Polaroid

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

گالری Polaroid بر اساس CSS3 و jQuery کار می کند و بر اساس یک سیستم قالب است که کاربران را قادر می سازد تا طرح بندی های منحصر به فردی را به راحتی ایجاد کنند. این افزونه دسترسی مستقیم به کتابخانه رسانه WP دارد و از تصاویری که قبلا آپلود شده اند پشتیبانی می کند.

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

گالری تصاویر برای جوملا

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

sigplus

مخفف Simple Image Gallery Plus است. و sigplus - دقیقا همان کاری را انجام می دهد که نامش می گوید: از کاربران در ساخت گالری تصاویر ساده پشتیبانی می کند.

این پلاگین نمایش اسلاید ساده به همین منظور ساخته شده است و به ویژه برای صفحات اصلی و گالری های کوچک با تعداد قابل کنترلی از تصاویر مناسب است. کاربران بی تجربه بدون پیچیدگی های غیر ضروری می توانند از عملیات ساده و شهودی این الری تصویر، بهره ببرند.

در حالت پیشرفته نیز، کاربران با تجربه می‌توانند از تنظیمات گسترده‌تر برای تصاویر کوچک، ذخیره‌سازی در cache و موارد دیگر استفاده کنند. این افزونه رایگان است و از طریق فهرست برنامه های افزودنی جوملا قابل دانلود است.

گالری Phoca

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

در حالی که این برنامه نسبت به رقیب خود، sigplus، پیشرفته تر است، اما در عملکرد خود، آنقدرها هم بصری نیست. مخصوصا مبتدیان به زمان نیاز دارند تا با طیف کامل عملکردها و نحوه کار با آنها آشنا شوند.

با این حال، هنگامی که جان سالم از مراحل ابتدایی کار با این افزونه، به در بردید، برنامه علاوه بر عملکردهای اصلی و معمولی خود، از جمله واترمارک و گزینه های دانلود، دارای بسیاری از ویژگی های عملی و حرفه ای تر است.

این افزونه رایگان را می توان در وب سایت رسمی جوملا یافت، در حالی که وب سایت توسعه دهنده مستندات گسترده و ماژول ها و افزونه های اضافی را برای گالری فوکا ارائه می دهد.

SIGE - مخفف گالری تصاویر ساده و گسترش یافته

افزونه SIGE (گالری تصویر ساده و گسترش یافته)، گزینه دیگری را برای پیاده سازی گالری تصاویر در جوملا فراهم می کند. این افزونه گالری دائما توسط انجمن بزرگ خود در حال به روز رسانی و بهبود است.

در میان طیف وسیعی از عملکردهای آن، به اصطلاح حالت توربو است که کاربران را قادر می‌سازد تا تصاویر و گالری‌های تصویری بزرگ را بدون زمان بارگذاری طولانی و تأثیر منفی بر عملکرد وب‌سایت، آپلود کنند.

ویژگی‌های اضافی (مانند فراخوانی پارامتر، واترمارک، نمایش فهرست، مرتب‌سازی هوشمند در سرور) تنها بخش کوچکی از فهرست به ظاهر بی‌پایان برنامه‌های افزودنی را تشکیل می‌دهند. کاربران می توانند این پلاگین را از وب سایت اینترنتی جوملا دانلود کنند.

گالری تصاویر برای سیستم مدیریت محتوای TYPO3

TYPO3 سومین سیستم مدیریت محتوای محبوب از نظر کاربران پس از وردپرس و جوملا است. تیپو، یک نرم افزار CMS بسیار قابل گسترش است، که برای وب سایت های کوچک و متوسط و همچنین شرکت های بزرگ مفید است.

بر این اساس، TYPO3 دارای یک جامعه بزرگ است که دارای سابقه طولانی در تولید، به‌ روز رسانی‌ ها و برنامه‌های افزودنی برای این سیستم مدیرت محتوا هستند که بسیار فراتر از هر CMS دیگری است.

با این حال، TYPO3 راه حل ساده ای نیست، اگر به دنبال پیاده سازی یک وب سایت بدون هیچ دانش قبلی هستید این سیستم مدیریت محتوا شاید گزینه مناسبی برای شما نباشد.

با وجود این، بسیاری از کسب‌ و کارها تصمیم می‌گیرند زمان و پول خود را برای استخدام کارکنان واجد شرایط خود برای کار با این CMS سرمایه‌گذاری کنند تا از مزایای بسیاری که این افزونه ارائه می دهد، بهره مند شوند.

TYPO3 راه حل هایی حرفه ای، در بسیاری از زمینه ها از جمله گالری تصاویر ارائه می دهد.

گالری تصویر Yet Another Gallery

افزونه Yet Another Gallery یا به اختصار YAG، یکی از پرطرفدارترین افزونه‌ها برای پیاده سازی گالری‌ها در TYPO3 است. بزرگترین مزیت این افزونه این است که به طور مداوم به روز می شود و بنابراین با استانداردهای فعلی مطابقت دارد.

افزونه‌های YAG به لطف گزینه‌های پیکربندی گسترده‌شان، انعطاف‌پذیری زیادی را فراهم می‌کنند و این برنامه را به همان اندازه برای پروژه‌های کوچک و خصوصی و همچنین وب‌سایت‌های شرکتی بزرگ‌تر مناسب می‌سازد.

مانند خود CMS، گالری‌های تصویر نیز به‌صورت جداگانه قابل گسترش هستند و می‌توانند دقیقا برای هر پروژه تنظیم شوند. کاربران می توانند طرح خود را تعیین کنند یا از میان طیف گسترده ای از تم های از پیش ساخته شده، که از مخزن برنامه افزودنی در دسترس هستند، یکی را انتخاب کنند.

برنامه افزودنی برای دانلود از وب سایت رسمی TYPO3 به رایگان قابل دانلود است، جایی که می توانید اطلاعات دقیق و آموزش های نصب و مدیریت گالری ها را نیز بیابید.

Perfect Lightbox

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

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

ویژگی های اضافی شامل نمایش اسلاید، حالت نمایش قابل تنظیم و گزینه دانلود برای بازدیدکنندگان است. کاربران همچنین می توانند ظاهر لایت باکس را به راحتی سفارشی سازی کنند. می توانید پرفکت لایت باکس را از اینجا دانلود کنید.