标签: lightbox

我目前在我的网页上的灯箱框架中有一个表单.当用户使用无效数据提交表单时,会出现一个div,其中包含表单顶部的表单错误列表.问题是:我需要某种jQuery验证回调来在错误div出现后调整灯箱的大小.据我所知,没有办法用jQuery灯箱做到这一点.

我有一个页面,其中包含注册用户的详细信息.每个html表包含80-90个用户.对于每个用户,都有一个$ username变量.我通常会在下面的代码中显示他们的照片.

print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\">
<img src=\"big-avatar-$username.jpg\">
</a>";

但是用户可以在新选项卡中打开图像.我想轻松地展示大头像.我的第一选择是lightbox-jquery.但是因为我在我的网站中使用了twitter-bootstrap,所以我决定使用默认的bootstrap和jquery功能.

我看到有"bootstrap-modals".当用户点击链接时,我不打算显示任何超过我的大图.

我试过这个:

print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" >
        <img src=\"small-avatar-$username.jpg\" ></a>";
print '</td>';

.

print "<div id=\"$username\" class=\"modal\">";
       <img src=\"big-avatar-$username.jpg\">
print "</div>";

.

<script type="text/javascript" id="js">
        $('#username').modal();
</script>

我想把$('#username').modal();
每个用户都放到我的页面会使HTML文件变得庞大.

但后来我尝试了类似锚的类名:$('.img-modal').modal();
但这不起作用.

在这种情况下你会推荐什么？

我想一起使用Owl-carousel和PrettyPhoto灯箱,但在此之前,我想知道是否已经存在类似的一体化解决方案.

更具体地说,我想在悬停时制作带有标题的内嵌图像/视频内容滑块库.它必须是responsive和touchable移动设备.如果还没有,那么Owl-carousel和PrettyPhoto一起工作没有问题,是否存在冲突风险？

谢谢你的帮助.

我正在使用jQuery的colorbox在页面上打开iframe.在页面上有两个闪存SWF.当我单击打开颜色框的按钮时,那些闪光SWF显示在我的颜色框div的顶部.我已经检查了颜色框的CSS属性,并且覆盖有position:absolute和z-index:999.我给了SWFs一个z-index:0属性,但它们仍然显示在colorbox的顶部.这种情况发生在Firefox,IE和Chrome中.

什么是jQuery最小的灯箱插件(在大小方面)？接近Fancybox的东西,但更小:)

将标题转换为链接在从此处下载的Lightbox 2.51中不起作用
以下是代码:

<a href="images/examples/image-1.jpg" rel="lightbox" 
  title="&lt;a target='_self' href='http://www.google.com'&gt;Google&lt;/a&gt;">
  <img src="images/examples/thumb-1.jpg" alt="" />
</a>

我该怎么办？
谢谢 :)

我目前遇到Lightbox 2的问题.所有脚本和CSS都安装正确,我没有更改或添加代码到css和脚本.

我每次都在下面得到结果,我似乎无法解决它.关于为什么会这种情况发生的任何想法？

我有一个图像,点击后,将打开一个灯箱(来自http://lokeshdhakar.com/projects/lightbox2/的脚本),我想要做的是禁用当按钮切换为关闭时发生.(因此单击图像不会执行任何操作.)

我尝试使用.off和.unbind在网站上的其他一些答案后禁用灯箱,但它们都没有为我工作.我也跟着如何使用jQuery动态启用/禁用链接？如建议但没有运气.

下面是HTML.

<div style="margin-left:10%;padding:1px 16px;">
  <section id="four_columns">
    <article class="img-item">
      <figure>
        <a href="img/livingroom.jpg" data-lightbox="livingroom"><img id="img_window1" src="img/livingroom.jpg" width="200" height="120"></a>
        <figcaption>
          <strong>Living Room 
            <div class="onoffswitch">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="window1" value="window1" checked>
                <label class="onoffswitch-label" for="window1">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
            </div>
          </strong>
        </figcaption>
      </figure>
    </article>
...

和javascript

<script type="text/javascript">
  $(document).ready(function() {
  var full_opacity = 1;
  var faded_opacity = 0.3;
  var fade_speed = 'fast';              
  var objid;

  $('input[name="onoffswitch"]').each(function() {
    objid = "#img_" + $(this).val();

    if($(this).prop('checked')) {
        $(objid).css('opacity', full_opacity);
    }
    else …

我试图在单击每张照片时在Javascript / CSS灯箱中打开每张照片。

目前，灯箱中只有我的照片列表中的第一张照片。其他照片不会在灯箱中打开。

请有人可以解释/告诉我为什么这样做，并解释/告诉我这样做的正确方法吗？

这是我的HTML / PHP：

<?php $result4 = $mysqli->query("SELECT * FROM user_data WHERE user_id = $p_id");
    if($result4->num_rows > 0) {
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';

    } ?>  

<!-- The Modal -->
<div id="myModal" class="modal"> …

我使用 Featherlight Lightbox 打开不同宽度的 iframe，请参阅下面小提琴上的第 1 个 2 链接：

http://jsfiddle.net/sm123456/d5Lvw1rs/

问题是我似乎无法使 iframe 响应，即。当浏览器窗口低于 iframe 宽度时，iframe 应切换到 100%。

我已经尝试过下面的代码，它应该可以很好地工作，但即使在删除时也不会data-featherlight-iframe-height="575" data-featherlight-iframe-width="800".

data-featherlight-iframe-style="width: 100% !important; max-width: 800px !important;"

任何帮助将非常感激！