CODEWITHSUNDEEP
phpjavascriptjqueryjoomla
underscore
underscore

Reputation: 6877

how to show other images with slideshow

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

This is my default joomla property images squeezebox gallery code in JEA Component.

and i changed the slideshow preview with jquery and my new code is this 

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

But the problem is this

How will i show other images with Joomla code ?

Upvotes: 0

Views: 923

Answers (3)

RafaelOS
RafaelOS

Reputation: 1

this code does not work anymore. That's because the Yooeffects no longer works in Joomla 3x . And the code of the JEA has changed too.

Upvotes: 0

Alberto S.
Alberto S.

Reputation: 2105

I think it would be much better if you change all your code, and just leave the original code of the JEA component. Then, install YooEffects ( you can download the component for free from the yootheme page ).

After that, go to the php file in charge of creating the gallery ( in my case : /components/com_jea/views/property/tmpl/default_squeezebox.php ) and just change the following code :

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

for this one: 

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

Then, do the same for the rest of the images for the item. Finally, you will get something like this:

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

Upvotes: 0

Mihai Iorga
Mihai Iorga

Reputation: 39704

Why didn't you keep the format and just added an incremental variable?

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

Upvotes: 1

Related Questions