Home/ Questions/Q 8411717
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:29:39+00:00

PHP Code <?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);

  • 0

PHP Code

<?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 code 

 * {
    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;
  }

Using above cods the output is this

how to align horizontally using CSS

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is why:

    Deveoper Tools Screenshot

    Link to fullsize image

    Your <a> tags are inside the same <li> tag, that’s why they appear like that. Put <li class="image<?php echo $num; ?>"> inside your foreach loop.

    <?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 ?>
    • 0