2012-04-26 4 views
0

Интересно, сможет ли кто-нибудь помочь.Невозможно показать 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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
    <script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script> 
    <script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script> 
    <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></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-media.js?v=1.0.0"></script> 
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script> 
    <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 
    <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" /> 

    <script type="text/javascript"> 

$(document).ready(function() { 
    $("a.fancybox").fancybox({ 

     'centerOnScroll':'true', 
     helpers : { 
     title : { 
      type : 'inside' 
     } 
    }, 


     'transitionIn':'elastic', 
     'transitionOut':'elastic', 
     'speedIn':600, 
     'speedOut': 200, 
     'overlayShow':false 
    }); 

}); 


</script> 

</head> 
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: 100px; margin-right: 100px; margin-bottom: -10px; float: left; position: absolute;"> 
<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"> 

        <?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" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?> 
    </form> 
</body> 
</html> 

Проблема у меня в том, что я не могу создать заголовок внутри образа, или даже больше нигде, кроме как на «парить над», который, как представляется, по умолчанию. Я пробовал всевозможные способы попробовать и заставить это работать.

т.е.

$(document).ready(function() { 
    $("a.fancybox").fancybox({ 

     'centerOnScroll':'true', 
     'titleShow':'true', 
     'titlePosition':'inside', 
     'transitionIn':'elastic', 
     'transitionOut':'elastic', 
     'speedIn':600, 
     'speedOut': 200, 
     'overlayShow':false 
    }); 

}); 

и

$(document).ready(function() { 
     $("fancybox").fancybox({ 

      'centerOnScroll':'true', 
      'titleShow':'true', 
      'titlePosition':'inside', 
      'transitionIn':'elastic', 
      'transitionOut':'elastic', 
      'speedIn':600, 
      'speedOut': 200, 
      'overlayShow':false 
     }); 

    }); 

Я попытался добавление и удаление ', удаляя пробелы, все без успеха. Я просто задавался вопросом, может ли кто-нибудь посмотреть на это и сообщить мне, где я ошибаюсь.

Большое спасибо и привет

ответ

3

В этой строке:

<a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?> 

Попробуйте установить атрибут title внутри a, а не alt тега внутри img. Таким образом, становится:

<a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" /></a><?php endfor; ?> 
+0

Привет @tomhallam. Это здорово, спасибо вам большое за вашу помощь. С уважением – IRHM

+0

Без проблем мой добрый человек! Рад помочь. – freshnode

0

В случае добавления заголовка элемента в вашей якорный тег не работает, вы можете заставить заголовок в настройках FancyBox

$(document).ready(function() { 
    $("fancybox").fancybox({ 
    'title'   : 'yourtitle' 
    'centerOnScroll' : 'true', 
    'titleShow'  : 'true', 
    'titlePosition' : 'inside', 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'speedIn'  : 600, 
    'speedOut'  : 200, 
    'overlayShow' : false 
    }); 
}); 
Смежные вопросы