Tumblr主题照片覆盖到下一张照片网址？

我遇到的问题是这样的，我想将我正在工作的主题中的所有<img>都转换为画廊，并且没有插件，这意味着要使覆盖图工作（我想我已经完成了），然后调用下一个/ prev雇用<img><a href>从下一个/ prev div标记（分类）为.img-main最近的我来了下一个按钮转到下一个雇员<img>和prev按钮回到第一个...我感到茫然，任何帮助将是非常感谢。Tumblr主题照片覆盖到下一张照片网址？

，所以我想我的问题是如何使上点击按钮替换当前img（重叠的）下一个.post>.img-main的href的src？

<!DOCTYPE html> 

<!Copyright 2013 - MacKenzie Bobbitt // @macbobbitt_ //> 

<html> 

<head> 

    <title>{title}</title> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

    <style type="text/css"> 

    body{} 

    #overlay{ 
     width: 100%; 
     height: 100%; 
     background: rgba(0,0,0,0.3); 
     box-shadow: inset 0 0 50px rgba(0,0,0,0.5); 
     position: fixed; 
     top: 0; 
     left: 0; 
     z-index: 999; 
     display: none; 
    } 

     .photo-wrapper{ 
      width: 100%; 
      height: 80%; 
      position: relative; 
      top: 10%; 
      left: 0; 
      text-align: center; 
     } 

      .prev-img{ 
       width: 5%; 
       height: 50px; 
       position: absolute; 
       top: 50%; 
       left: 5%; 
       float: left; 
       background: #000; 
       cursor: pointer; 
       margin-top: -25px; 
      } 

      .overlay-img{ 
       height: 100%; 
       max-width: 90%; 
       border-radius: 3px; 
       box-shadow: 0 0 50px rgba(0,0,0,0.5); 
      } 

      .next-img{ 
       width: 5%; 
       height: 50px; 
       position: absolute; 
       top: 50%; 
       right: 5%; 
       float: right; 
       background: #000; 
       cursor: pointer; 
       margin-top: -25px; 
      } 

    #container{ 
     width: 1040px; 
     margin: 50px auto; 
    } 

     .post{ 
      width: 250px; 
      margin: 5px; 
      margin-bottom: 3px; 
      float: left; 
     } 

    </style> 

</head> 

<body> 

<div id="overlay"> 

    <div class="photo-wrapper"> 

     <div class="prev-img"></div> 

     <img class="overlay-img" src=""/> 

     <div class="next-img"></div>  

    </div> 

</div> 

<div id="container"> 

{block:Posts} 

    {block:Photo} 

    <div class="post"> 

     <a class="img-main" href="{PhotoUrl-HighRes}"><img src="{PhotoUrl-250}" alt="{PhotoAlt}"/></a> 

    </div> 

    {/block:Photo} 

{/block:Posts} 

</div> 

<script type="text/javascript"> 

$(function(){ 

    $('.post').click(function overlayShow(){ 

     var photoId = ($(this).find('.img-main').attr('href')); 

     var nextImg = ($(this).closest('.post').nextAll('.post').find('.img-main').attr('href')); 

     var prevImg = ($(this).closest('.post').prevAll('.post').find('.img-main').attr('href')); 

     $('#overlay').show(); 

     $('body').css('overflow','hidden'); 

     $('.overlay-img').attr('src', photoId); 

     $('.next-img').click(function(){ 

      $('.overlay-img').attr('src', nextImg); 

     }); 

     $('.prev-img').click(function(){ 

      $('.overlay-img').attr('src', prevImg); 

     }); 

     return false; 

    }); 

    $('#overlay').click(function(){ 

     //$('#overlay').hide(); 

     $('body').css('overflow','scroll'); 

    }); 

}); 

</script> 

</body>

这是一个tumblr主题，所以它可能是一个有点混乱的人谁不知道语法，但我有一个活生生的例子，所以你可以看到。

DEMO：http://unnaturalchoices.tumblr.com

一些在演示的图像是NSFW

编辑：感谢wmonk的帮助，但我认为有一些错误的是，在IMG插件牛逼装载马上它，只有当我打的上一个按钮，前进低谷的职位不工作（见DEMO）>在Safari 6.0.5和Chrome 27.0测试...

编辑加载只用一个插件...

来源

2013-06-13 valaxin

尝试用这种替代点击事件代码：现在

$('.post').on('click', 'a', function overlayShow(e){ 
    e.preventDefault(); 

    var elem = $(this), 
     parent = elem.parents('.post'), 
     photoId = (elem.find('.img-main').attr('href')); 

    parent.addClass('selectedImg'); 

    $('body') 
     .css('overflow','hidden') 
     .find('#overlay').show() 
     .find('.overlay-img').attr('src', photoId); 

    $('.next-img').on('click', function(e){ 
     e.preventDefault(); 

     nextImg = $('.selectedImg').removeClass('selectedImg').prev('.post').addClass('selectedImg').find('a').attr('href') 
     $('.overlay-img').attr('src', nextImg); 

    }); 

    $('.prev-img').on('click', function(e){ 
     e.preventDefault(); 

     prevImg = $('.selectedImg').removeClass('selectedImg').prev('.post').addClass('selectedImg').find('a').attr('href') 
     $('.overlay-img').attr('src', prevImg); 

    }); 

    return false; 

});

来源

2013-06-13 13:40:23 wmonk

您的代码已经改变了直播网站上。要解决此图像加载问题的变化：

var elem = $(this), 
    parent = elem.parents('.post'), 
    photoId = (elem.find('.img-main').attr('href'));

到：

var elem = $(this), 
    parent = elem.parents('.post'), 
    photoId = (elem.find('a:first').attr('href'));

如果这个作品请注明我的答案是正确的，请！ :)

来源

2013-06-17 13:18:14 wmonk

对不起，我刚刚放弃了希望有人会回到我身边，代码现在更新。它仍然没有拉你点击img。看看你是我自己（我不会改变代码，直到我回到你身边）谢谢你。 – valaxin

Tumblr主题照片覆盖到下一张照片网址？

回答

相关问题