2011-07-18 4 views
0

현재 웹 사이트를 다시 디자인하고 있으며 원본 코드는 끔찍하고 어수선했습니다. 원래 이미지 갤러리를 새 레이아웃으로 변환해야합니다. 내가 생각했던 것보다 더 많은 일.파일 이름/설명을 수동으로 복사하여 새 코드에 붙여 넣지 않고 큰 이미지 갤러리를 다시 디자인하는 방법

참조 :

<div id="new_gallery" style="margin-left: 260px; margin-top: 220px;"><a href="new_gallery.html" style="color: #FFFFFF; text-decoration: none; font-size: 20px;">Check out our new additions!</a></div> 

     <div id="e5" style="position:absolute;left:252;top:266;width:203;height:155;"><!--$img %ImageAssetImpl:images/Abednego.JPG$--><img src="images/Abednego.JPG" width="203" height="155" alt=""></div>  <div id="e6" style="position:absolute;left:278;top:435;width:140;height:62;"><span class="text"><b><font color="#CCCCCC"><span style="font-size:14px;line-height:17px;">Abednego &nbsp;&nbsp;&nbsp;&nbsp;$3.00<br>McMillian 1972<br> 25&quot; E Evr 6.5&quot;<br soft></span></font></b></span>  </div> 

    <div id="e7" style="position:absolute;left:520;top:265;width:161;height:156;"><!--$img %ImageAssetImpl:images/Almond_Puff.JPG$--><img src="images/Almond_Puff.JPG" width="161" height="156" alt=""></div>  <div id="e8" style="position:absolute;left:768;top:262;width:151;height:159;"><!--$img %ImageAssetImpl:images/Angelus_Angel.JPG$--><img src="images/Angelus_Angel.JPG" width="151" height="159" alt=""></div> 

이 같은 다소 이미지가 표시됩니다 만든 새로운 레이아웃 (참고 : 내가 간격이없는 http://dev.collabshot.com/show/323dc7/

이것은 원래 표시 엉터리 코드는 아직 올바르게 설치되지 않았다) : http://dev.collabshot.com/show/7eefa2/

나는 내가 필요로하는 코드를 추출하기 위해 정규 표현식을 사용할 수 있음을 알고있다. 그러나, 나는 이것을 할 정규 표현식을 생각해 볼 경험이 전혀 없다. 나는 그것이 tho에 관하여가는 능률적 인 방법 일 것입니다 지 모른다.

설명과 가격이 책정 된 그리드 형식으로 이러한 이미지를 표시하려고하는 것이 거의 아닙니다.

이것은 이와 같은 문제에 경험이있는 웹 디자이너에게 질문입니다. 가능한 한 고통스럽지 않게하려면 어떻게합니까?

답변

2

외부 CSS로 다이브. 하지만 정말로, 때때로 웹 디자인은 매우 지루한 과정입니다.

0

이 상황에서 나는 과거에 간단한 jQuery 선택기를 사용하여 이미지의 모든 마크 업을 제거했습니다. 그런 다음 필요한 부분으로 마무리하고 해당 HTML을 div 어딘가에 작성하십시오. 이와 같이 :

$(function(
    var output = ""; 

    $('img').each(function(){ 
     $('some-container').append($(this).html()); 
    }); 

)}; 

그래도 효과가 있지만 모든 것을 얻을 수는 없습니다. 조금이라도 손질해야합니다.

관련 문제