그림자 상자가있는 사진 갤러리에 대한 목록/격자 전환

저는이 사이트를 처음 접하고 jquery 및 JavaScript를 처음 사용했지만 실제로 HTML과 CSS에 대해 잘 이해하고 있습니다. 학교 수업 중 Shadowbox 플러그인을 사용하여 포토 갤러리 웹 페이지를 만들고 있습니다. 나는 그 모든 부분을 다 써 버렸지 만 요구 사항 중 하나는 사용자가 변경할 수있는 일종의 사용자 옵션을 추가하여 쿠키에 저장하게하는 것입니다. (나는 아직 쿠키 부분을 보지 못했다.) 필자의 선택에 따라, 페이지의보기를 이미지가있는 그리드보기 (기본값)에서 페이지의 캡션 목록보기로 전환하는 토글을 추가하기로 결정했다. 이미지. 어떻게해야하는지 알았지 만 루프를 사용하여 훨씬 간단한 방식으로 할 수 있다고 판단했습니다.그림자 상자가있는 사진 갤러리에 대한 목록/격자 전환

<body> 
     <div id="preferences"> 
     <h1>My Photo Gallery</h1> 
     <ul id="options"> 
      <li><a href="#" id="list"><img src="media/listview.png" alt="List view"/></a></li> 
      <li><a href="#" id="grid"><img src="media/gridview.png" alt="List view"/></a></li> 
     </ul> 
     </div> 

     <div id="gallery"> 
      <a rel="shadowbox[Gallery]" class="l1 img" href="media/img1.jpg" title="Black and White Leopard Pattern"><img src="media/thumb1.jpg" alt="Black and White Leopard Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l2 img" href="media/img2.jpg" title="Snow Leopard Pattern"><img src="media/thumb2.jpg" alt="Snow Leopard Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l3 img" href="media/img3.jpg" title="Colorful Triangle Pattern"><img src="media/thumb3.jpg" alt="Colurful Triangle Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l4 img" href="media/img4.jpg" title="Tie Dye Zebra Stripe Pattern"><img src="media/thumb4.jpg" alt="Tie Dye Zebra Stripe Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l5 img" href="media/img5.jpg" title="Blue Knitted Pattern"><img src="media/thumb5.jpg" alt="Blue Knitted Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l6 img" href="media/img6.jpg" title="Black and White Damask Pattern"><img src="media/thumb6.jpg" alt="Black and White Damask Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l7 img" href="media/img7.jpg" title="Wooden Panel Pattern"><img src="media/thumb7.jpg" alt="Wooden Panel Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l8 img" href="media/img8.jpg" title="Brick Pattern"><img src="media/thumb8.jpg" alt="Brick Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l9 img" href="media/img9.jpg" title="Watercolor Pattern"><img src="media/thumb9.jpg" alt="Watercolor Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l10 img" href="media/img10.jpg" title="Orange Stripe Pattern"><img src="media/thumb10.jpg" alt="Orange Stripe Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l11 img" href="media/img11.jpg" title="Blue Scales Pattern"><img src="media/thumb11.jpg" alt="Blue Scales Pattern"/></a> 
      <a rel="shadowbox[Gallery]" class="l12 img" href="media/img12.jpg" title="Woven Pattern"><img src="media/thumb12.jpg" alt="Woven Pattern"/></a> 
     </div> 
    </body>

그래서 여기가 (어쨌든 목록 부분에 대한) 작동하는 샘플입니다,하지만 난 각각의 이미지를 반복해야 할 것 때문에 코드의 측면에서 과도한 것 같다 여기

는 내가 가지고있는 HTML입니다 여기

$(document).ready(function(){ 

    $("#list").click(function() { 
     $("a.l1").removeClass("img"); 
     $("a.l1").addClass("lst"); 
     $("a.l1").text($("a.l1").attr("title"); 
     //repeat for l1 through l12 (that`s the letter L not a 1) 
    }); 
    $("#grid").click(function() { 
     $("a.l1").removeClass("lst"); 
     $("a.l1").addClass("grid"); 
     //actually have no idea at all how to get this back to the original img tag other than maybe .innerHTML??? 
     //repeat for l1 through l12 (again, that`s the letter L not a 1) 
    }); 
}):

그리고 내가 (작동하는 방법을 제외하고, 저기요) 그것을 할 방법을 좀입니다

$(document).ready(function(){ 
    var i = 1; 
    var selcur = $("'a.l" + i + "'"); 
    var title = selcur.attr("title"); 
    var image = '<img src="media/thumb' + i + '.jpg" alt="' + title + '"/>'; 

    $("#list").click(function() { 
     while (1<=12) { 
      selcur.addClass("lst"); 
      selcur.removeClass("img"); 
      selcur.text(title); 
      i++; 
     } 
     i = 1; 
    }); 

    $("#grid").click(function() { 
     while (1<=12) { 
      selcur.removeClass("lst"); 
      selcur.addClass("img"); 
      selcur.text(image); 
      i++; 
     } 
     i = 1; 
    }); 
});

이 잘못에 대해 어떻게 생각하는지 다시 말해주세요. 나는 이것에 대해 처음이에요. 모든 응답에 감사드립니다! 이 작업을 수행하는 더 좋은 방법이 있습니까? 나는 그것을 간단하게 유지하고 정말로 싶다.

출처

2013-11-05 InfamouslyBubbly

나는 체인을 사용하여 코드를 단순화했으며 (JQuery가 편리한 이유 중 하나), 속성을 수정하기위한 루프를 단순화했습니다. 나는 그것을 테스트하지 않았지만 당신이 한 일을해야한다. 그리드를 다시 클릭 할 때 이미지를 추가하기 전에 링크 안의 텍스트를 지워야 할 수도있다.

$(document).ready(function(){ 
    $("#list").click(function(){ 
     $("#gallery a").removeClass("img").addClass("lst").each(function(index,el){ 
      $(el).text($(el).attr("title")); 
     }); 
    }); 
    $("#grid").click(function(){ 
     $("#gallery a").removeClass("lst").addClass("grid").each(function(index,el){ 
      $(el).html("<img src=\""+$(el).attr("href").replace("img","thumb")+"\" alt\""+$(el).attr("title")+"\"/>"); 
     }); 
    }); 
});

출처

2013-11-05 03:14:08 Jason

답장을 보내 주셔서 감사합니다. 나는 이것을 시도하고 그것은 나를 위해 작동하지 않았다, 예기치 않은 식별자의 콘솔에 구문 오류를 주었다. – InfamouslyBubbly

죄송합니다. 구문 오류가 수정되어 테스트되었습니다. 이제 작동합니다. 서둘러 일을 가르쳐 줄게, 사과 – Jason

정말 고마워! 한 번 더 사소한 문제가 있어도 충분히 알아낼 수는 있지만 나중에 되돌리려는 이미지는 미리보기 이미지 (thumb1, thumb2 등이 패턴을 따라 표시)가 될 것입니다. 대신 지금은 더 큰 이미지에로드되고 내 강사가하지 말라고 말한 CSS – InfamouslyBubbly

그림자 상자가있는 사진 갤러리에 대한 목록/격자 전환

답변

관련 문제