0

PHP 代码

<?php

    defined('_JEXEC') or die('Restricted access');
    $document = &JFactory::getDocument();
    $document->addScript("components/com_jea/views/property/tmpl/js/jquery-1.8.0.min.js");
    $document->addScript("components/com_jea/views/property/tmpl/lib/jquery.ad-gallery.js");
    $document->addScript("components/com_jea/views/property/tmpl/lib/inside.js");
    $document->addStyleSheet("components/com_jea/views/property/tmpl/lib/jquery.ad-gallery.css");
    $document->addStyleSheet("components/com_jea/views/property/tmpl/lib/inside.css");  
    if (!is_array($this->row->images)) {
        return ;
    }

    $mainImage = array_shift($this->row->images);


    JHTML::_('behavior.modal', 'a.jea_modal', array('onOpen' => '\onOpenSqueezebox'));
    ?>


     <body>
      <div id="container">


        <div id="gallery" class="ad-gallery">
          <div class="ad-image-wrapper">
          </div>
          <div class="ad-controls">
          </div>
          <div class="ad-nav">
            <div class="ad-thumbs">
              <ul class="ad-thumb-list">
                <li>
            <a href="<?php echo $mainImage->URL ?>" >
                <img src="<?php echo $mainImage->mediumURL ?>" width="100px" height="50px" alt="<?php echo $mainImage->title ?>" title="<?php echo $mainImage->description ?>"  />
            </a>
        </li>


            <li class="image<?php echo $num; ?>">
             <?php if( !empty($this->row->images)): ?>
                <?php foreach($this->row->images as $num => $image) : ?>
                    <a href="<?php echo $image->URL ?>" >
                        <img  src="<?php echo $image->mediumURL ?>" alt="<?php echo $image->title ?>" width="100px" height="50px" title="<?php echo $image->description ?>"  />
                    </a>
                <?php endforeach ?>
            </li>
        <?php endif ?>
           </ul>
            </div>
          </div>
        </div>


    </body>

CSS 代码 

 * {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
    color: #333;

  }
  select, input, textarea {
    font-size: 1em;
  }
  #container {
   line-height:0px !important;
    border:1px solid #DEE5EB;
  }




  h2 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px dotted #dedede;
  }
  h3 {
    margin-top: 1.2em;
    margin-bottom: 0;
    padding: 0;
  }
  .example {
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
  }
  ul {
    list-style-image:url(list-style.gif);
  }
  pre {
    font-family: "Lucida Console", "Courier New", Verdana;
    border: 1px solid #CCC;
    background: #f2f2f2;
    padding: 10px;
  }
  code {
    font-family: "Lucida Console", "Courier New", Verdana;
    margin: 0;
    padding: 0;
  }

  #gallery {
    padding: 30px;
    background: #F8FAFB;
  }

使用上面的代码输出是这样的

如何使用 CSS 水平对齐

4

2 回答 2

2

这就是为什么：

开发者工具截图

链接到全尺寸图像

您的<a>标签在同一个<li>标​​签内，这就是它们看起来像这样的原因。放入<li class="image<?php echo $num; ?>">你的foreach循环中。

<?php if(!empty($this->row->images)): ?>
    <?php foreach($this->row->images as $num => $image): ?>
        <li class="image<?php echo $num; ?>">
            <a href="<?php echo $image->URL ?>" >
                <img  src="<?php echo $image->mediumURL ?>" alt="<?php echo $image->title ?>" width="100px" height="50px" title="<?php echo $image->description ?>"  />
            </a>
        </li>
    <?php endforeach ?>
<?php endif ?>
于 2012-08-18T10:15:29.703 回答
0

因为ul类ad-thumb-list使宽度更大，仅此而已。

于 2012-08-18T10:32:29.970 回答