Question

[编辑]：截至今天（2015年9月11日）我完全改写了系统，问题稍微改变了它的重点：我需要强制Bootstrap将流体柱向下推，而不需要调整窗口大小。

我正在尝试构建一个类似Imageboard的系统，而我现在却陷入了Image Expansion。首先，行为应该像4chan：当我点击缩略图时，它应该扩展到DIV中的原始大小：

没有打破div并且“溢出”外面和
按下文本，所以它不应该环绕div，
当用户点击展开的img时，它应缩小回缩略图。

有一个GIF显示预期的行为HERE。

当我第一次发布这个问题时，我仍然无法模拟扩展/收缩行为，现在它终于完成了。但是我有另一个问题：当我单击图像并将其扩展到原始大小时，图像所在的Bootstrap流体列（列-md-3）也应该展开，因此列旁边的列，文本所在的位置坐在（column-md-9）应该在图像下面。

预期行为的TEXT表示：

When Image is in "thumbnail" form:

    | SIDEBAR  | column-md-3 (img) | column-md-9 (txt)  |
    |          |                   |                    |

When Image is in "full size" form:

    | SIDEBAR  | column-md-3 (img)                      |
    |          | column-md-9 (txt)                      |

目前的行为是：扩展时，图像溢出列div，文本卡在其位置，浮动在img上方。

我已经制作了一个JS小提琴，无论我能带来什么：JSFiddle。请注意JS Fiddle中呈现的HTML iframe的大小，它会自动显示预期的行为（文本列位于img列下）但我希望它在页面为完整大小时发生，而不会调整大小。

感谢您的帮助！

代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Nothing to see here.
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="http://nerdproject.midiaficcao.com.br/content/080a8f3e26797f14182abbd68ec8a079.png" class="post-image">
                                <img src="http://nerdproject.midiaficcao.com.br/content/thumb/080a8f3e26797f14182abbd68ec8a079.png" data-src="http://nerdproject.midiaficcao.com.br/content/thumb/080a8f3e26797f14182abbd68ec8a079.png" class="image-thumb" />
                            </a>                            
                        </div>
                        <div class="col-md-9">
                            The Text<br/>
                            Should go under<br />
                            The image<br />
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

$(document).ready(function() {

    var imageLinks = $('a.post-image');
    imageLinks.click(function(e) {
        e.preventDefault();
        if( $(this).children('img').hasClass("image-thumb")  ) {
            // This is a thumb, switch to original
            fullImg = $(this).children('img').attr('src').replace('thumb/', '');
            $(this).children('img').attr('src', fullImg);
            $(this).children('img').addClass('image-full');
            $(this).children('img').removeClass('image-thumb');
        } else {
            // This is a full image, swith back to thumb
            thumbImg = $(this).children('img').attr('data-src');
            $(this).children('img').attr('src', thumbImg);
            $(this).children('img').addClass('image-thumb');
            $(this).children('img').removeClass('image-full');
        }
    });
});

感谢所有已经帮我解决扩展行为的人！

PS。如果有人建议如何改进jQuery代码，请这样做！

CHANGELOG：

2015年9月6日 - 图像会扩大，但不会缩减。现在行为是固定的。 2015年9月11日 - 图像完美展开/缩小，扩展时打破列。

类似4chan的内联img扩展（Bootstrap + JQuery）

0 个答案: