آموزش ایجاد و نمایش تصاویر پانوراما در سایت

Images
Images
Images
Images

آموزش ایجاد و نمایش تصاویر پانوراما در سایت

  • مقالات
  • 5,404 بازدید

زمانی ایجاد تصاویر پانوراما (Panorama) تنها از پس عکاسان حرفه ای و البته به کمک لنز مخصوص بر می‌آمد. پیشرفت نرم افزاری باعث شده است که در چند سال اخیر حتی عکاسان آماتور نیز با استفاده از برنامه کامپیوتری و دوربین ارزان قیمت و یک لنز eye fish معمول توانایی خلق آثار عریض و یا همان پانوراما را داشته باشند. البته این روزها تقریباً تمامی گوشی مجهز به سیستم عامل اندروید و البته نسخه جدید سیستم عامل اپل برای آیفون یعنی iOS 6 به کاربران خانگی نیز قدرت ایجاد تصاویر پانوراما را تنها در چند ثانیه می‌دهند.

با وجود این پیشرفت‌ها استفاده از تصاویر عریض و گویای Panorama در سایت یا وبلاگ ما می‌تواند تأثیر خوبی را برای جذب مشتریان و یا کاربران داشته باشد. برای مثال با مراجعه به سایت هتل معروف دنیا، مکان تفریحی، سایت گردشگری و … حتماً در گوشه کنار این سایت‌ها شاهد تصاویر عریض و خیره کننده‌ای خواهید بود. در این نوشته، چند روش برای اضافه کردن این‌گونه از تصاویر را در صفحات وب بررسی می‌کنیم.

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

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

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

استفاده از نمایشگر نقشه گوگل برای نمایش تصاویر
حتماً تا کنون با نمایشگر نقشه گوگل (Google Map) کار کرده‌اید و با روان بودن آن حتی در هنگام استفاده از اینترنت کم سرعت نیز آشنایی دارید. روش‌های زیادی برای استفاده از تصاویر در نمایشگر نقشه گوگل وجود دارد اما اگر می‌خواهید نتیجه کار را در صفحات سایت یا وبلاگ خود نمایش دهید و همه فایل درهاست سایت شما نگهداری شوند پیشنهاد ما استفاده از نرم افزار رایگان GMap Image Cutter است. پس از دانلود و اجرای این برنامه (این برنامه یک فایل با پسوند jar است پس برای اجرای آن نیاز به نصب Java در سیستم خود دارید) امکان ساخت نقشه گوگل البته با استفاده از تصاویر خود را خواهید داشت.

همان طور که در تصویر بالا نیز مشاهده می‌کنید پس از انتخاب تصویر مورد نظر مقدار Zoom را مشخص می‌کنیم و GMap Image Cutter به صورت خودکار تصاویر مورد نیاز را آماده کرده و در نهایت به شما یک فایل HTML به همراه تصویر مورد نیاز تحویل می‌دهد. در نهایت نیز برای نمایش فایل HTML در صفحات سایت خود می‌توانید از یک <iframe> ساده استفاده کنید.

سرویس زومیت مایکروسافت برای نمایش تصاویر بزرگ
با استفاده از سرویس زومیت که توسط توسعه دهندگان نرم افزاری مایکروسافت هدایت می‌شود توانایی نمایش تصاویر با ابعاد بزرگ را خواهید داشت. البته این سرویس امکانات زیاد دیگری مانند تبدیل صفحات وب به تصاویر چند مگا پیکسلی، نمایش فایل PDF، پشتیبانی از تصاویر SVG، امکان بزرگنمایی و حرکت بر روی تصاویر، امکان استفاده از تصاویر Flickr، SkyDrive و … را به همراه دارد. برای شروع استفاده از این سرویس تنها کافی است به آدرس zoom.it بروید و در صفحه ظاهر شده آدرس فایل تصویری و یا وب سایت مورد نظر خود را وارد کنید. پس از چند ثانیه همانند تصویر زیر همه چیز برای مرور آن تصویر توسط زومیت محیا شده است و اگر می‌خواهید از این ابزار و تصویر خود در صفحات سایت یا وبلاگ خود استفاده کنید از پایین تصویر می‌توانید بر روی گزینه Embed کلیک کنید تا کد نمایش این تصویر عرض به همراه نمایش دهنده زومیت برای استفاده در صفحات وب به شما نمایش داده شود.

برای دیدن نمونه بالا در سرویس زومیت می‌توانید به لینک Zoom.it Park بروید. در صورتی که بر روی مرورگر وب کاربران سایت شما Microsoft Silverlight نصب باشد از توانایی آن برای نمایش روان‌تر تصویر استفاده می‌شود و البته اگر نصب نباشد هم مشکل خاصی برای نمایشگر زومیت و نمایش آن به وجود نخواهد آمد و تنها کافی است مرورگر بازدید کننده از کدهای جاوا اسکریپت پشتیبانی کند. در صورتی که سایت شما بخشی جداگانه در رابطه با تصاویر پانوراما دارد و می‌خواهید به دفعات از زومیت برای نمایش تصاویر سایت خود استفاده کنید راهی ساده استفاده از API رایگان این سرویس است.

استفاده از Panorado JS در صفحات HTML5
در صورتی که صفحات سایت شما توسط HTML5 کد نویسی شده‌اند نیز برای نمایش تصاویر Panorama در صفحات سایت خود به همراه یک ابزار کنترل و نمایش تصاویر عریض فوق‌العاده می‌توانید از اسکریپت Panorado JS که هم اکنون نسخه 2 آن نیز انتشار یافته است استفاده کنید. در این روش برخلاف سرویس زومیت تمامی فایل و اسکریپت مورد نیاز درهاست شما قرار می‌گیرند و شما با استفاده از چند خط کد ساده که در صفحهPanorado JS Tech معرفی شده‌اند و البته آپلود فایل Panorado_min.js که حدود 40 کیلوبایت حجم دارد درهاست خود توانایی استفاده از نمایشگر Panorado را در سایت یا وبلاگ خواهید داشت.

از امکانات جالب این نمایش دهنده تصاویر با وضوح بالا می‌توان به امکان استفاده از صفحه کلید و یا موس برای جا به جایی در نقاط مختلف تصویر، بزرگنمایی هر نقطه از تصویر، امکان نمایش و شخصی سازی کامل در صفحات وب و… اشاره کرد. به غیر از امکان پشتیبانی از مرورگر فایرفاکس،گوگل کروم، اینترنت اکسپلورر و دستگاه اندروید و iOS همانند سرویس زومیت با استفاده از Panorado JS شما توانایی شخصی سازی حالت نمایش و ابزار این نمایشگر را نیز در دست خواهید داشت.

استفاده از jQuery Simple Panorama Viewer
اما این نمایشگر تصاویر پانوراما در صفحات وب نیز از jQuery برای متحرک سازی و نمایش تصویر شما کمک می‌گیرد. البته نسبت به Panorado JS و یا سرویس زومیت مایکروسافت خیلی ساده تر و سبک‌تر نیز است اما توجه داشته باشید امکان بزرگنمایی و یا حرکت عمودی بر روی تصاویر در این اسکریپت وجود ندارد و تنها با مشاهده کدهای آن اگر خود قصد نوشتن یک اسکریپت جدید را دارید فکر می‌کنیم راهنمایی خوبی را به دست خواهید آورد.

برای دریافت فایل مربوط به این اسکریپت به صفحه Simple Panorama Viewer بروید تا با فایل‌های مربوط به این اسکریپت و مثال‌هایی در رابطه با چگونگی استفاده از آن روبرو شوید.

پست های تصادفی

چرا CMS ؟
چرا CMS ؟
CMS با ارائه یک شیوه کارآمد و موثر در مدیریت وب سایت، سهولت بسیار زیادی به این کار بخشیده است.&nb...
چرا VPN می‌خواهیم؟
چرا VPN می‌خواهیم؟
این روزها محدوديت‌های اینترنتی علیه آی‌پی‌های ایرانی شدت فراوانی گرفته و تقریبا می...

طوفان فکری با تیم مشاوران آکو

درخواست مشاوره
مشاوره با آکو