zclip & twitter bootstrap: несовместимость?

Question

Я успешно использовал функцию zclip copy в буфер обмена до тех пор, пока не начал использовать Twitter начальной загрузки CSS. Теперь я не могу больше использовать zclip, у кого-нибудь есть решение для этого?

Некоторые результаты теста:

Вот как я использую zclip:

    $('.test').zclip({
        path:"{{ asset('bundles/yopyourownpoet/flash/ZeroClipboard.swf') }}",
        copy: 'test',
        afterCopy:function(){
            alert('The poem has been copied to the clipboard.');
        },
    });

Это прекрасно работает со следующим HTML:

<div class='test'>test</div>

Но всякий раз, когда я пытаюсь использовать изображение, оно больше не работает, вспышка не появляется:

<div class='test'><img src="{{ asset('bundles/yopyourownpoet/images/Star.png') }}" alt="Star" height="100" width="100" /></div>

Это прекрасно работало до того, как я начал использовать bootstrap... Есть ли подсказка для использования zclip & bootstrap, и у вас есть флеш над изображением? Большое спасибо.

Answer 1

Что ж, после многих попыток у меня наконец-то все заработало. Мне пришлось вернуться к zeroclipboard и больше не использовать zclip. Вот код, который работает:

    <div id="d_clip_container" style="position:relative; bottom: 25px; display: inline;">
        <img id='d_clip_button' style="position:relative; top: 25px;" src="{{ asset('bundles/yopyourownpoet/images/CopyPoemPage8.png') }}" alt="Copy Poem" height="71" width="300" />
    </div>

-

    ZeroClipboard.setMoviePath("{{ asset('bundles/yopyourownpoet/flash/ZeroClipboard.swf') }}");
    var clip = new ZeroClipboard.Client();
    clip.setText( 'text to copy' );
    clip.glue( 'd_clip_button', 'd_clip_container' );
    clip.setHandCursor( true );

Обратите внимание, что мне пришлось использовать трюк, нижние 25 пикселей на контейнере и верхние 25 пикселей на изображении, чтобы изображение со вспышкой накладывалось на изображение.

Это работает хорошо, за исключением того, что курсор не всегда меняется на указатель при наведении на изображение.

Я думаю, что это решение немного сомнительно, поэтому, если у кого-то есть лучшее решение, поделитесь им.