2011-03-24 4 views
0

여기 Fancybox 팝업 창에서 일련의 이미지를 순환 jQuery를 사용하고 있습니다 : http://ee.rouviere.com/web/portfolio마지막 뷰에서 현재 이미지가 나타나지 않도록하려면 어떻게합니까?

는 썸네일 이미지 중 하나를 클릭, 무슨 일이 일어나고 있는지 볼 수 있습니다. 팝업 창에서 왼쪽의 축소판을 클릭하면 오른쪽의 동일한 이미지를 더 크게 볼 수 있습니다. 이 모든 것이 잘 작동합니다. 그러나 해당 창을 닫고 다른 창을 열면 다른 축소판을 클릭 할 때까지 마지막 큰 이미지가 새 창에 계속 표시됩니다.

새 창을로드 할 때 마지막 창에서 "캐시 지우기"방법을 찾아야합니다.

$("a:has(img.web-port)").click(function() { 
    var largePath = $(this).attr("href"); 
    var caption = $(this).attr("title"); 
    $(".photo_large").attr({ src: largePath}); 
    $(".caption1").text(caption); 
    return false; 
    }); 

어떤 도움에 감사드립니다 :

여기
<div class="portfolio_popup_thumb"> 
     <a class="image-preview" href="#portfolio-frame-544"><img src="http://ee.rouviere.com/images/uploads/webPortFEC_thumb.jpg" alt="photo" /></a> 

     <p>Family Eye Care of Apex</p> 
</div> 

<div style="display:none;"> 
    <div id="portfolio-frame-544"> 
    <div class="frame"> 
     <div class="preview"> 
      <img class="photo_large" src="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex-home-large.jpg" alt="Family Eye Care of Apex" /> 
     </div> 

     <div class="viewer"> 
      <div class="thumbs"> 
       <div class="thumb1"> 
        <a href="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex-home-large.jpg" title="For Family Eye Care of Apex in Apex, North Carolina, we built a content management site that can be updated as new services are added and the company has expanded. The doctors in this practice wanted patients to have an easy on-line way to get information about specific eye conditions such as cataracts and low vision. The site also includes the capability to download patient forms, order contacts and glasses on-line, make on-line payments and schedule appointments. The site has google maps to the office location, google search within the site and search engine optimization. "><img src="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex-home-portthumb.jpg" alt="Family Eye Care of Apex" class="web-port" /></a> 
       </div> 
                <div class="thumb2"> 
        <a href="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex-exams-large.jpg" title="Family Eye Care of Apex also wanted patients to know what to expect before they have an eye exam. We created this slide show to walk them through the procedure. "><img src="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex_portthumb.jpg" alt="Family Eye Care of Apex" class="web-port" /></a> 
       </div> 
                         <div class="thumb3"> 

        <a href="http://ee.rouviere.com/_photos/Family-Eye-Care-items-montage.jpg" title="We also have designed a large number of other items for Family Eye Care of Apex, including business and appointment scheduling cards, brochures, magazine and web banner ads, coupons and flyers. "><img src="http://ee.rouviere.com/_photos/Family-Eye-Care-brochure-portthumb.jpg" alt="Family Eye Care of Apex" class="web-port" /></a> 
       </div> 
                <div class="thumb4"> 
                 <p>Visit the website:</p> 
        <p class="site-url"><a href="http://www.familyeyecareofapex.com">http://www.familyeyecareofapex.com</a></p> 

       </div> 

      </div><!-- end thumbs --> 
      <div class="info-box"> 

       <p class="caption1">For Family Eye Care of Apex in Apex, North Carolina, we built a content management site that can be updated as new services are added and the company has expanded. The doctors in this practice wanted patients to have an easy on-line way to get information about specific eye conditions such as cataracts and low vision. The site also includes the capability to download patient forms, order contacts and glasses on-line, make on-line payments and schedule appointments. The site has google maps to the office location, google search within the site and search engine optimization. </p> 
      </div> 
      </div><!-- end frame --> 
     </div><!-- end portfolio frame --> 
    </div><!-- end viewer --> 
</div> 

밖으로 이미지 교체를 구동하는 jQuery를 수 있습니다 : 여기

이 섹션의 HTML입니다.

감사합니다. 정확히 얼마나 멋진 상자를 모른 채

답변

0

여기에 작품 내 추측 :

당신은 멋진 상자 안에 이미지를 클릭

, 사용자 정의 기능은 클릭 이미지의 SRC 메인 이미지의 SRC 변경입니다. 그러나 사용자가 '닫기'버튼을 클릭하면 큰 이미지의 src를 지우는 코드가 표시되지 않습니다. 다른 사용자가 닫기 버튼을 클릭하면 해당 값을 지워보십시오. 예 :

$("#fancybox-close").click(function(){ 
    $(".photo_large").attr({ src: ''}); 
    $(".caption1").text(''); 
}); 

Fancybox의 작동 방식에 따라 문제가 해결되거나 이미지가 손상 될 수 있습니다.

팬시 박스의 축소되지 않은 버전에 대한 링크를 게시하고 살펴 보겠습니다.

+0

안녕하세요. 이것이 바로 올바른 방향의 한 걸음입니다. 페이지를보고 시도해보십시오. 이제는 값이 지워 지므로 두 번째 화면이로드되어 축소판 그림 만 표시됩니다. 이제 첫 번째 큰 이미지를로드하는 방법을 알아 내야합니다. 난 정말 당신의 도움을 주셔서 감사합니다. – fmz

+0

응답이 늦어서 죄송합니다. 그래도 작동하는 것처럼 보입니다! 좋은 작업. 다행히 도울 수있어서 기뻐. –

관련 문제