مشکل پلاگین zoomy slider

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ازمایشی</title>
    <link rel="stylesheet" href="../zoomy.css" />
    <link rel="stylesheet" href="../style.css" />
  </head>
  <div id="myGallery"></div>
  <body>
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <script src="../zoomy.js"></script>
    <script>
      $(document).ready(function () {
        var urls = ["D:\html\ts1.jpg", "D:\html\ts2.jpg", "D:\html\ts3.jpg"];
        $("#myGallery").zoomy(urls);
      });
    </script>
  </body>
</html>

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

سلام. وقتتون بخیر
مشکل اصلی که در کد شما باعث عدم نمایش تصاویر شده، استفاده از مسیر فایل محلی (local file path) با فرمت ویندوز هست. مرورگرها به دلایل امنیتی اجازه بارگذاری منابع فایل محلی رو هنگام اجرای فایل HTML از سرور لوکال (مثلاً 127.0.0.1:5500) نمی‌دن.
راه‌حل:
۱. استفاده از مسیر نسبی (روش توصیه‌ شده)
اگر فایل‌های تصاویرتون در پوشه‌ی همون پروژه ذخیره شدن، از مسیر نسبی استفاده کنید:

var urls = ["images/ts1.jpg", "images/ts2.jpg", "images/ts3.jpg"];

مطمئن شید که فایل‌های تصاویر در پوشه‌ی images داخل پروژه قرار دارن.

۲. استفاده از localhost به‌جای مسیر file://
اگر تصاویر رو مستقیماً از D:\html\ می‌خونید، می‌تونید یک سرور محلی راه‌اندازی کنید تا مرورگر اجازه‌ی دسترسی به فایل‌ها رو بده.

اگر از VS Code استفاده می‌کنید، افزونه‌ی Live Server رو نصب کنید.
اگر از Node.js استفاده می‌کنید، می‌تونید از http-server به این صورت استفاده کنید:

npx http-server D:/html

بعد از اجرا، مسیر تصاویر رو به این شکل تنظیم کنید:

var urls = ["http://localhost:8080/ts1.jpg", "http://localhost:8080/ts2.jpg", "http://localhost:8080/ts3.jpg"];

۳. جایگزین کردن \ با / در مسیر فایل
در جاوااسکریپت و اکثر مرورگرها، مسیرهای فایل باید از / به‌جای \ استفاده کنن. پس اگر اصرار دارید که از مسیر مطلق استفاده کنید، این‌طور بنویسید:

var urls = ["file:///D:/html/ts1.jpg", "file:///D:/html/ts2.jpg", "file:///D:/html/ts3.jpg"];

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

بهترین پاسخ

سحر پاشائی ۲۴ بهمن ۱۴۰۳، ۰۶:۳۱