如何用幻灯片显示其他图像

时间：2012-08-18 08:01:49

标签： php javascript jquery joomla 

<?php

// no direct access
defined('_JEXEC') or die('Restricted access');

if (!is_array($this->row->images)) {
    return ;
}

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



$previousLabel = JText::_('Previous');
$nextLabel     = JText::_('Next');

$script=<<<EOB
    var previousLabel = '$previousLabel';
    var nextLabel = '$nextLabel';
EOB;


$this->document->addScriptDeclaration($script)
               ->addScript(JURI::root(true).'/media/com_jea/js/jea-squeezebox.js');

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

<div class="clr" ></div>

<div id="jea-gallery-preview" >
<a class="jea_modal" href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           id="jea-preview-img"
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>" /></a>
</div>

<?php if( !empty($this->row->images)): ?>
<div id="jea-gallery-scroll" >
    <?php foreach($this->row->images as $image) : ?>
      <a class="jea_modal" href="<?php echo $image->URL?>" >
      <img src="<?php echo $image->minURL ?>" 
           alt="<?php echo $image->title ?>" 
           title="<?php echo $image->description  ?>" /></a><br />
    <?php endforeach ?>
</div>
<?php endif ?>

这是我在JEA Component中的默认joomla属性图片squeezebox图库代码。

我用jquery更改了幻灯片预览，我的新代码就是这个

<?php

// no direct access
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);



$previousLabel = JText::_('Previous');
$nextLabel     = JText::_('Next');

$script=<<<EOB
    var previousLabel = '$previousLabel';
    var nextLabel = '$nextLabel';
EOB;


$this->document->addScriptDeclaration($script)
               ->addScript(JURI::root(true).'/media/com_jea/js/jea-squeezebox.js');

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


<div class="clr" ></div>




  <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="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image0" /></a>

            </li>
            <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image1" /></a>

            </li>
              <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image2" /></a>

            </li>
            <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image3" /></a>

            </li>
               <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image4" /></a>

            </li>
            <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image5" /></a>

            </li>
               <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image6" /></a>

            </li>
            <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image7" /></a>

            </li>
               <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image8" /></a>

            </li>
            <li>
              <a href="<?php echo $mainImage->URL ?>" >
      <img src="<?php echo $mainImage->mediumURL ?>" 
           width="90px"; height="50px";
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>"

   class="image9" /></a>

            </li>
          </ul>
        </div>
      </div>
    </div>

但问题is this

如何使用Joomla代码显示其他图像？

3 个答案:

答案 0 :(得分：1)

为什么不保留格式并只添加增量变量？

<ul class="ad-thumb-list">

    <li>
        <a class="jea_modal" href="<?php echo $mainImage->URL ?>" >
            <img src="<?php echo $mainImage->mediumURL ?>"  alt="<?php echo $mainImage->title ?>" title="<?php echo $mainImage->description ?>" class="image0" />
        </a>
    </li>

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

答案 1 :(得分：0)

我认为如果更改所有代码会更好，只留下JEA组件的原始代码。然后，安装YooEffects（您可以从yootheme页面免费下载该组件）。

之后，转到负责创建图库的php文件（在我的例子中：/components/com_jea/views/property/tmpl/default_squeezebox.php），只需更改以下代码：

<a class="jea_modal" href="<?php echo $mainImage->URL ?>" >
  <img src="<?php echo $mainImage->mediumURL ?>" 
       id="jea-preview-img"
       alt="<?php echo $mainImage->title ?>" 
       title="<?php echo $mainImage->description ?>" /></a>

这个：

<a data-lightbox="group:apartamento" href="<?php echo $mainImage->URL ?>" >
<!-- <a class="jea_modal" href="<?php echo $mainImage->URL ?>" >-->
      <img src="<?php echo $mainImage->mediumURL ?>" 
           id="jea-preview-img"
           alt="<?php echo $mainImage->title ?>" 
           title="<?php echo $mainImage->description ?>" /></a>

然后，为该项目的其余图像执行相同操作。最后，你会得到这样的东西：

<div id="jea-gallery-preview" >

<a data-lightbox="group:apartamento" href="<?php echo $mainImage->URL ?>" >

    <!-- <a class="jea_modal" href="<?php echo $mainImage->URL ?>" >-->
          <img src="<?php echo $mainImage->mediumURL ?>" 
               id="jea-preview-img"
               alt="<?php echo $mainImage->title ?>" 
               title="<?php echo $mainImage->description ?>" /></a>
    </div>

    <?php if( !empty($this->row->images)): ?>
    <div id="jea-gallery-scroll" >
        <?php foreach($this->row->images as $image) : ?>
          <a data-lightbox="group:apartamento" href="<?php echo $image->URL?>" >
      <!--<a class="jea_modal" href="<?php echo $image->URL?>" >-->
      <img src="<?php echo $image->minURL ?>" 
           alt="<?php echo $image->title ?>" 
           title="<?php echo $image->description  ?>" /></a><br />
    <?php endforeach ?>
</div>

答案 2 :(得分：0)

此代码不再有效。 那是因为Yooeffects不再适用于Joomla 3x。 JEA的代码也发生了变化。

相关问题
最新问题