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主題照片覆蓋到下一張照片網址？

回答

相關問題