Search Form and Social Buttons

HotThemes Logo and Top Menu

To request a forum account, please login here and open support ticket. Only customers with active order(s) can open forum account!

× Discussion about Hot Joomla Carousel free Joomla module.

Topic-icon how to order images by name, using HOT Joomla Ca

More
6 years 10 months ago #778 by RudiAhlers
Hi all,

I'm using the HOT Joomla Carousel AJAX Image Rotator and need the images to be rotated in sequence.

So, all images are names 10.jpg, 11.jpg, 12.jpg, 13.jpg, 14.jpg, etc. But, they are displayed in random sequence, and not in order, as can be seen here:
<script type="text/javascript" src="http://als.org.za/modules/mod_hot_joomla_carousel/js/jquery.carousel.js"></script>
<script type="text/javascript">
    jQuery(function(){
        jQuery("div.foo").carousel({
         direction: "horizontal",
         loop: 1,
         dispItems: 1,
         pagination: false,
         paginationPosition: "inside",
         autoSlide: 1,
         autoSlideInterval: 3000,
         delayAutoSlide: false,
         combinedClasses: false,
         effect: "slide",
         slideEasing: "swing",
         animSpeed: "slow",
         equalWidths: "true"
      });
    });
</script>
   
<div class="hotcarousel">
    <div class="foo">
         <ul style="margin:0; padding:0">
   
<li><img src="/images/stories/stasies/19a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/14b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/15b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/17b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/23a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/24a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/17a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/19b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/12b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/14a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/16b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/11b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/11a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/20a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/16a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/21a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/24b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/22b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/13a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/23b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/22a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/12a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/13b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/18a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/18b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/20b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/15a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/21b.jpg" alt="" width="340" height="400" /></li>

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


Does anyone know how to "hack the code" in order to make it load the images as follows:

<li><img src="/images/stories/stasies/11a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/11b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/12a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/12b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/13a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/13b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/14a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/14b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/15a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/15b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/16a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/16b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/17a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/17b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/18a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/18b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/19a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/19b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/20a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/20b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/21a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/21b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/22a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/22b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/23a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/23b.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/24a.jpg" alt="" width="340" height="400" /></li>
<li><img src="/images/stories/stasies/24b.jpg" alt="" width="340" height="400" /></li>

Please Log in to join the conversation.

More
6 years 10 months ago #784 by milos
It's not random order. It's order per date when files are last modified.

Please Log in to join the conversation.

More
6 years 10 months ago #788 by RudiAhlers
Is it possible to order the images by filename?

Please Log in to join the conversation.

More
6 years 6 months ago #1788 by fmoulton
if you are having issues with ordering and your server. You can add this simple piece of code to make it sort alphabetically or numerically.

Go to modules/mod_hot_joomla/carousel/tmpl and open the file default.php

Around Line 159 you will see the beginning of the for loop
for ($loop = 0; $loop <= $infinite_pics_number; $loop += 1) {

add this line after it

//sort images
sort($infinite_pic);
//end sort

save the file and re-upload it to the server.

Now your images will sort like this:

a-image
b-image

or

1-image
2-image

Happy Coding!!! B)

Please Log in to join the conversation.

More
6 years 6 months ago #1789 by milos
Thanks! It's a great contribution!

Please Log in to join the conversation.

Time to create page: 0.115 seconds

Links, Partners and Social Media