fancyBox 이미지 번호

누군가가 도움을 줄 수 있는지 궁금합니다.fancyBox 이미지 번호

는 아래의 코드와 같이 내가 fancyBox를 사용하여 이미지 갤러리를 만들었습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Gallery</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <script type="text/javascript" src="fancybox/lib/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script> 
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script> 
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script> 
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script> 
    <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" /> 
    <link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" /> 
    <link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" /> 


    <script type="text/javascript"> 

      $('.fancybox').fancybox({ 
       openEffect : 'elastic', 
       closeEffect : 'elastic', 

       padding : 20, 
       fitToView : true, 

       prevEffect : 'none', 
       nextEffect : 'none', 

       closeBtn : false, 
       arrows : false, 

       helpers : { 
        title : { 
         type : 'inside' 
        }, 
        buttons : {} 
       }, 

       afterLoad : function() { 
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
       } 
      }); 


</script> 
    <style type="text/css"> 
<!-- 
.style1 { 
    font-size: 14px; 
    margin-top: 5px; 
    margin-right: 110px; 
} 
--> 
    </style> 
</head> 
<body style="font-family: Calibri; color: #505050; margin-left: 240px; float:left;"/> 
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> &larr; View Uploaded Images </div> 
    <form id="gallery" name="gallery" class="page" action="index.php" method="post" style="margin-left: -120px; margin-right: 50px;"> 

    <p> 
     <?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) : 
          $xmlFile = $descriptions->documentElement->childNodes->item($i); 
          $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8'); 
          $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8'); 
          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source')); 
          $thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail')); 
        ?> 
     <a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>"alt="<?php echo $description; ?>" /></a> 
     <?php endfor; ?> 
    </p> 
</form> 
</body> 
</html>

모두가 즉, 페이지 번호를 제외하고 잘 작동 '의 이미지 번호 ...'텍스트 만에 나타납니다 첫 번째 이미지.

나는이 코드를 'fancyapps'사이트에서 직접 가져 왔으므로 두 코드가 동일하기 때문에 오류가있는 곳이 약간 확실하지 않습니다.

나는 누군가가 이걸 좀 봐줄 수 있는지 궁금해하고 내가 잘못한 곳을 알려주지.

많은 감사와 'fancyBox'의 새로운적인 버전을 사용하여 관련

출처

2012-04-28 IRHM

자체 포함 된 jsFiddle 예제가 매우 유용합니다. –

안녕하세요. 알고 있습니다. 제공하지 않아서 정말 유감입니다. 솔직히 말하면 jsFiddle을 어떻게 사용하는지 모르겠다. 나는 포스트의 엉망진창을 만들고 싶지 않았다. 나는 지금 모습을보고 내가 함께 할 수있는 것을 보게 될 것이다. 나도 가지고있는 문제는 스크립트가 PHP에서 실행된다는 것과 PHP가 jsFiddle에서 사용될 수 있는지 여부가 확실하지 않다는 것입니다. 좀 더 많은 것을 돕기 위해 원래 게시물을 수정하고 전체 페이지 스크립트를 추가했습니다. 친절한 점이 – IRHM

'$ (document) .ready (function() {// fancybox script here}) 안에 fancybox 사용자 정의 스크립트를 래핑 해 보았습니까? – JFK

이 이제 해결되었습니다 이미지 번호는 잘 작동합니다.

출처

2012-05-01 10:59:15 IRHM

fancyBox 이미지 번호

답변

관련 문제