سؤال

وأنا أحاول أن أضيف شريط الصور إلى معرض صورة باستخدام GalleryView في المكونات، الإصدار 2.0. لدي مشكلة أن يتم عرض الصور المحددة في شريط الصور (الصور المصغرة) في لوحة على بدلا من الصورة المحدد في شعبة (الطبقة = "لوحة").

وكما هو واضح من الأمثلة والوثائق، ويمكن إضافة مقطع سينمائي مخصصة على النحو التالي:

<ul class="filmstrip">
<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
</ul>

وبلدي معرض يشبه هذا:

<div id="gallery_wrap">
    <div id="photos" class="galleryview">
        <div class="panel">
            <img src="/upload/pic/IMG_02740_orig.jpg" />
        </div>
        <div class="panel">
            <img src="/upload/pic/IMG_02740_orig.jpg" />
        </div>
        <ul class="filmstrip">
            <li>
                <img src="/upload/pic/IMG_02739_thumb.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
            <li>
                <img src="/upload/pic/IMG_02739_thumb.jpg" alt="Eden" title="Eden" /></li>
        </ul>
    </div>
</div>

ما أقوم به خطأ؟ لدي الكلي أساسا النسخ واللصق من مثال وأنه لا يعمل. لا أحد تنفذ بنجاح هذا القسم سينمائي في GalleryView؟

وكيف يبدو:

بديل النص http://img692.imageshack.us/img692/852/galleryviewfilmstripima .jpg و

وأنت يمكن أن نرى بوضوح أن في لوحة هي صورة مصغرة الموافقة المسبقة عن علم بدلا من الأصلي (صورة مختلفة تماما عن الصورة المصغرة).

وأنا باستخدام الكائن الإعداد التالي:

<script type="text/javascript">
        $(function() {
            $('#photos').galleryView({
                panel_width: 800,
                panel_height: 300,
                frame_width: 100,
                frame_height: 38,
                transition_speed: 1200,
                background_color: '#222',
                border: 'none',
                easing: 'easeInOutBack',
                pause_on_hover: true,
                nav_theme: 'custom',
                overlay_height: 52,
                filmstrip_position: 'top',
                overlay_position: 'top'
            });
        });
    </script>
هل كانت مفيدة؟

المحلول

ويرتبط فقط في قضية القضية إلى GalleryView 2.0 ، انظر عينات ل ذلك، وهناك تغييرات في إعداد قائمة الصور: أنت لا تحتاج إلى استخدام الصور المصغرة بعد الآن ... Your'e وصف معرض يجب أن تبدو

<div id="gallery_wrap">
   <ul id="gallery">
      <li>
         <span class="panel-overlay">Effet du soleil</span>
         <img src="/upload/pic/IMG_02740_orig.jpg" />
      </li>
      <li>
         <span class="panel-overlay">Eden</span>
         <img src="/upload/pic/IMG_02740_orig.jpg" />
      </li>
   </ul>
</div>

وعلى أي حال، انظر GalleryView 2.0 نموذجا

نصائح أخرى

وكان من الممكن أن يكون المصغرة المخصصة:

<ul id="gallery">
   <li><img class="panel-content" src="path/to/image" /><img src="path/to/thumbnail" /></li>
</ul>
سوف

ولكن وحة تراكب لا تعمل بعد الآن. 5 ثواني من قراءة رمز جلبت لي هناك:)

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