عرض jquery prettyphoto lightbox في iframe الوالد

StackOverflow https://stackoverflow.com/questions/1483227

  •  18-09-2019
  •  | 
  •  

سؤال

أنا أستخدم jQuery prettyphoto 2.5.3 وكنت أتساءل كيف يمكنني الحصول على مربع الضوء لعرضه في النافذة الأصل ل iFrame عند تحديد رابط الصورة داخل iFrame؟

إليك الرمز الخاص بي:

الصفحة في iFrame:

<html>
<head>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>

<body>
    <a href="animage.jpg" rel="prettyPhoto">
                <img src="animage.jpg" height="200" width="200"/>
    </a>
            <script type="text/javascript" charset="utf-8">
              $(document).ready(function(){
                 $("a[rel^='prettyPhoto']").prettyPhoto();
              });
    </script>
</body>

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

رمز iFrame:

<html>
<head>
</head>

<body>
    <iframe src="inner.html"/>
</body>
</html>

ومع ذلك، عندما قمت بتحميل الصفحة باستخدام iFrame وانقر على رابط الصورة في الصفحة الموجودة في الصفحة الموجودة في iFrame، أريد عرض Lightbox في النافذة الأصل وليس في iFrame.

هل كانت مفيدة؟

المحلول

جرب هذا المحدد: $("#myid", top.document)

Top.Document يخبر المحدد لاستهداف عنصر MyID الموجود في مستند أعلى (الصفحة الأصلية). لكي يعمل هذا للعمل، يجب تحميل JQuery في الملف الذي ينظر إليه من خلال iFrame.

مصدر: http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4A60A123AF؟pli=1.

تعديل

حسنا الطريقة الوحيدة التي سيعملها:

  1. قم بإزالة التعليمات البرمجية التالية من صفحتك الحقيقية (Inner.html، تلك الموجودة في iFrame):

    <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
         $("a[rel^='prettyPhoto']").prettyPhoto();
      });

  2. الآن في صفحة iframe الخاصة بك، أضف:

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

  3. أضف أيضا رمز JS التالي:

    $(function() {
    $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } );
});

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

نصائح أخرى

وجدت هذا في مكان ما

<base target="_parent" />

ضعها داخل رأس iframe

قمت بحل المشكلة مع iFrame باستخدام نسخ من البيانات. راجع رمز البرنامج النصي في الصفحة الرئيسية: ملاحظة: في التعليمات البرمجية هناك صورة تبدأ في معرض الصور والمعرض غير مرئي، ومعرف الصورة هو "BTNGaleria". 

$("#iPrincipal").load(function(){
  $("#iPrincipal").contents().find("#btngaleria").click(function() { 
    var temp=$("#iPrincipal").contents().find("#galeria").html();
    $("#galeria").html(temp);
    $("#galeria:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',slideshow:4000, autoplay_slideshow: true});
    $("#galeria li:first a").click();
  });
});

رمز IFRAME HTML هو:

<iframe src="home.asp" name="iPrincipal" id="iPrincipal" frameborder="0" width="100%" height="540"></iframe>

والحمل في الجزء السفلي من الصفحة التي تتلقى البيانات المنسوغة:

<div id="falso" style="display:none; visibility:hidden"><ul id="galeria" class=""></ul></div>

لقد قمت بإجراء اختبارات FF و IE وتشغيلها بشكل طبيعي.

تتغير الرمز الذي قمت به:

  • إضافة إعداد حقيقي / خاطئ جديد في الإعدادات التي تبدأ في السطر 18. أي displayIframeContentsInParent: false,

  • في حوالي خط 92 في if(theGallery) إذا تحقق كتلة إذا كان الإعداد الجديد قد تم تعيينه على True وإذا كان الأمر كذلك، فابحث في محتويات iFrame لمزيد من الصور في المعرض:

    if(settings.displayIframeContentsInParent)
{
   $("iframe").contents().find('a[rel*='+theGallery+']').each(function(i) {
      if($(this)[0] === $(link)[0]) setPosition = i;
 images.push($(this).attr('href'));
 titles.push($(this).find('img').attr('alt'));
 descriptions.push($(this).attr('title'));
   });
}

  • حول الخط 125 في الوظيفة المفتوحة: في if($.browser.msie && $.browser.version == 6) إذا تم كتلة أخرى، أضف ما يلي لإخفاء مربعات التحرير والسرد أيضا في iFrame:

    if(settings.displayIframeContentsInParent)
{
    $("iframe").contents().find('select').css('visibility','hidden');
}

  • أخيرا في جميع أنحاء السطر 300 في الوظيفة الوثيقة: في if($.browser.msie && $.browser.version == 6) إذا تم كتلة أخرى، أضف ما يلي لجعل صناديق التحرير والسرد في iFrame مرئية مرة أخرى:

    if(settings.displayIframeContentsInParent)
{ 
  $("iframe").contents().find('select').css('visibility','visible');
}

بالطبع، عند استخدام صورة جميلة الآن، ستحتاج إلى ضبط الإعداد الجديد على TRUE بحيث سيبحث محتويات iFrame على الصور الأخرى لعرضها IE

$("a[rel='prettyphoto']").each(function() {
  $(this).prettyPhoto(displayIframeContentsInParent: true);
});

لقد نشرت رابطا لهذه التغييرات في منتدى دعم PrettyPhoto لذلك نأمل أن يتم دمج هذه التغييرات في مصدر PrettyPhoto.

انتهيت من هذا:

<script type="text/javascript">
    $('iframe').load(function(){
    $(this).contents().find("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

يبدو من خلال جميع IFRAMES على الصفحة الرئيسية. jQuery داخل رمز iFrame غير مطلوب.

هذا كل شيء يتعلق بمحتوى Iframe يجب تحميله قبل محاولة الوصول إليه:

http://grasshopperpebles.com/ajax/using-jquery-to-access-iframe-content/

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top