كيف يمكنني اكتشاف هذه الصورة خارج شاشة (المتصفح) ثم نقلها؟

Question

انا استخدم هذه تقنية للحصول على صورة منبثقة من الصور المصغرة. المشكلة الوحيدة هي أنه إذا كانت الصورة المصغرة قريبة من حافة الشاشة واحدة، فإن الصورة الأصلية كبيرة حقا، ثم يتم قطعها بواسطة حافة الشاشة.

أعلم أنه يتطلب JavaScript، لكنني لست متأكدا تماما من كيفية اكتشاف أن الصورة خارج الشاشة القابلة للعرض، ثم قم بإجراء التبديل إلى الجانب الآخر من الصورة المصغرة.

كيف يمكنني أن أفعل هذا؟

Answer 1

تحتاج إلى القيام ببعض الحسابات ولكن من الممكن. باستخدام البرنامج المساعد أعلاه افعل شيئا مثل هذا ...:

   $('.thumb').mouseover(function () {  
     if( ( $(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width()) ) < 0) {
        //Change the position here..
        alert("Out of browser");
     }

   });

ضع في اعتبارك أن هذا يخبرك فقط أن الصورة خارج المتصفح الذي هو عليه. بالإضافة إلى ذلك، هذا لا يأخذ في الاعتبار الهوامش. قد ترغب في القيام بشيء أكثر مثل

   $('.thumb').mouseover(function () {  
     if( ( $(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width() + parseInt($(this).siblings('.popup').css("margin-left") + parseInt($(this).siblings('.popup').css("margin-right")) ) < 0) {
        //Change the position here..
        alert("Out of browser");
     }

   });

ملاحظة يتم استخدام المخلفة كما ترجع XXPX (XX كونها القيمة العددية). سوف يتقاضى المخلوع أن ... قد يكون هناك قابس ولكن إذا كنت ترغب في القيام بذلك من الصفر، فهذه بداية جيدة.

إن نقل الصورة نفسها هي مشكلة أخرى لم أتناولها هنا، لكنني أعتقد أن هذا يجب أن يمنحك بداية صلبة.