Samitha Samitha - 3 months ago 13
jQuery Question

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 ?

Answer

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>