第二次触摸时灯箱打开图像

时间:2017-02-07 11:09:23

标签: javascript jquery html ios css

第二次触摸屏幕是否可以打开一张图像?

我无法在线找到文档!!

我必须这样做:

Fist touch show title,为此我写了几行js,其中img的标题写在a标签内,鼠标悬停显示来自img的内容。

第二次触摸在Lightbox中打开图像。

 $(".foto a").addClass("image");
    $("a.image").each(function(){
        $(this).attr('alt',$(this).find("img").attr('alt'));});

a.image {
    display: block;
    overflow: hidden
}

.image {
    position: relative
}

.image img {
    width: 100%;
    vertical-align: top
}

.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.image:after {
    content: '\A';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
}

.image:before {
    content: attr(alt);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 15px 20px;
    font-size: 16px;
    font-family: "futura-pt", sans-serif;
}

.image:hover:after, .image:hover:before {
    opacity: 1;
}

此刻这项工作在桌面上运行良好,但在移动设备中没有因为Lightbox在第一次触摸时打开。 所以我可以找到一个解决方案,在第二次触摸时打开图像,第一种方式可以看到悬停效果吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

好的,我发现这段代码运行得很好!!!

Link to the article

$(".foto a").addClass("image").addClass("taphover");
$("a.image").each(function(){
    $(this).attr('alt',$(this).find("img").attr('alt'));
});

$('a.taphover').on('touchstart', function (e) {
'use strict'; //satisfy the code inspectors
var link = $(this); //preselect the link
if (link.hasClass('hover')) {
    return true;
} else {
    link.addClass('hover');
    $('a.taphover').not(this).removeClass('hover');
    e.preventDefault();
    return false; //extra, and to make sure the function has consistent return points
}
});

我没有改变我的CSS和工作,但如果你想用新的风格做一些事情:

a.taphover:hover, a.taphover.hover {
    // css for hovering here
};