替換重複的html php圖像和文本更改

我的投資組合網站多年來運行良好，但我期望優化大量重複性HTML。它正在成爲一個巨大的列表（在lazyload上最多有150個圖像）。我假設我應該使用PHP，但我的知識很少，不知道從哪裏開始（已經搜索了很多）。我正在使用Atom。替換重複的html php圖像和文本更改

這是鏈接到它現在是什麼：http://www.daynacasey.com/

我有，我有文字+與CSS懸停縮略圖許多部分。我想優化的事情： - 有沒有辦法生成「imagetotal」div？唯一改變的是圖像標題。如果是這樣，如何調用每個圖像？ - 我重複縮略圖和懸停圖像相同，有沒有辦法調用'相同的圖像'？我寧願預加載懸停，也不願有更小的縮略圖。 - 是否有方法來生成alttext？部分內有類似的文字。

<section id="#one" class="project sections"> 
    <div class="text"> 
    Lorum ipsum 
    </div> 

    <div class="leftimages"> 

     <div class="imagetotal"> 
      <img src="placholder.jpg" data-original="/imgs/ONE/image.jpg" class="hover lazy" alt="alttext"/> 
      <div class="enlarge enlargehover"> 
      <img data-original="/imgs/ONE/image.jpg" alt="alttext" > 
      </div> 
     </div> 

     <div class="imagetotal"> 
      <img src="placholder.jpg" data-original="/imgs/ONE/image2.jpg" class="hover lazy" alt="alttext"/> 
      <div class="enlarge enlargehover"> 
      <img data-original="/imgs/ONE/image2.jpg" alt="alttext" > 
      </div> 
     </div> 

    </div> 
    </section>

CSS

.leftimage img {max-height: 100%; width: auto; max-width: 100%; height: auto;} 

    .enlargehover{ 
    position: fixed; 
    top: 0px; 
    left: 300px; 
    display: none; 
    margin: 1vw 3%; 
    height: 98%; 
    z-index: 8; 
    } 

    .imagetotal a {display: block!important;} 
    .imagetotal:hover .enlarge {display: block!important;}

非常感謝。

來源

2017-06-09 D.Case

你甚至不需要PHP。你可以使用Handlebars模板來做到這一點。或者，只需使用適當的標籤創建一個隱藏部分，然後克隆它，替換更改的部分，然後在DOM的適當位置附加新創建的部分，使其顯示爲可見。既然你會在循環中做到這一點，建立一個計數器，並將其添加到相應的隱藏的div的ID，這樣你有thumb37，image37，div73等，並且它們是唯一的。 – LSerni

你可以通過JavaScript ...你必須設置所有的圖像在一個JavaScript數組..並做'循環'做重複性的HTML div .. – Jana

感謝您的幫助，我深入這些建議，看看如果我能使它工作。 –

HTML5附帶<template>元素。一個小例子應該在原生javascript的幫助下解釋這個用法。

<section id="one"> 

</section> 
<template id="imagetotal"> 
    <div class="imagetotal"> 
     <img src="" data-original="" class="hover lazy" alt=""> 
     <div class="enlarge enlargehover"> 
      <img data-original="" alt=""> 
     </div> 
    </div> 
</template> 
<script> 
    // array with your image data 
    var data = [ 
     { 
      src : 'placeholder.jpg', 
      data : '/imgs/ONE/image.jpg', 
      alt : 'bla', 
     } 
    ]; 
    if ('content' in document.createElement('template')) { 

     // get all needed dom elements 
     var section = document.getElementById('one'), 
      template = document.getElementById('imagetotal'), 
      img = template.querySelector('div.imagetotal > img'), 
      enlargeimg = template.querySelector('div.enlarge > img'); 

     data.forEach(function(element) { 
      // set template data 
      img.src = element.src; 
      img.dataset.original = element.data; 
      img.alt = element.alt; 

      enlargeimg.dataset.original = element.data; 
      enlargeimg.alt = element.alt; 

      // clone the template content and append it to the dom 
      let clone = document.importNode(template.content, true); 
      section.appendChild(clone); 
     }); 
    } 
</script>

有關HTML5元素的詳細信息，請參閱https://developer.mozilla.org/de/docs/Web/HTML/Element/template。模板元素得到all modern browsers的廣泛支持。對於Internet Explorer 11，有很好的polyfills，所以模板標籤可以用於這個舊的瀏覽器。

來源

2017-06-09 11:47:12 Marcel

替換重複的html php圖像和文本更改

回答

相關問題