Change the look of your recently shared images into a slide show.

To enhance the homepage layout, you can convert the recently shared images gallery into a slideshow.

1: To enhance the homepage layout, you can convert the recently shared images gallery into a slideshow.
2: The slideshow adapts to various screen sizes, making it ideal for use on mobile phones and tablets.

_______________________



You must first have the Recently shared images enabled under Administration Panel > Modules > Recently shared images > Configuration

"Recently shared images" settings"
Activate the "Recently shared images" on this forum : Yes
Display the link in the navigation bar : Yes
Display the recently shared images on the homepage : Yes




"Search in the index_box template for the code that begins with

Code: <!-- BEGIN switch_forum_images -->

and ends with

Code: <!-- END switch_forum_images -->

, and delete it."


replace it with

Code:

<!-- BEGIN switch_forum_images -->
<div id="konan-solid" class="forum-images">
<div class="konan-images">Recently shared images</div>
<div class="konan-solid">
<a href="/images" class="konan-konan">List of images</a>
 <button id="moveRight">❮</button>
  <button id="moveLeft">❯</button>
<div class="conan-conan">
<div class="fo-header">
<div class="category-title">
<script type="text/javascript">
 $(document).ready(function(){
    var scrollableContent = $('.conan-conan');
    var scrollAmount = 350;

    $('#moveLeft').click(function(){
        scrollableContent.animate({scrollLeft: '+=' + scrollAmount}, 400);
    });

    $('#moveRight').click(function(){
        scrollableContent.animate({scrollLeft: '-=' + scrollAmount}, 400);
    });
});
</script>

 <style>
div#imageList {width: 300px;}
 .konan-images {font-weight: bold;padding: 5px;text-align: center;color: white;background: #3594e1;}              
 .konan-solid {padding: 10px;border: dotted 1px #035393;background: white;}              
 .conan-conan {margin-top: 11px;height: 257px;overflow: scroll;}
a.konan-konan {font-weight: 900;font-size: 17px;border-radius: 10px;color: #fff !important;border: solid 1px #d5dcdf9c;padding: 5px;background: #249eff;float: right;text-decoration: none !important;}
.forum-hidden .container-imgs-list {max-height: 250px !important;padding: 0 !important;text-decoration: auto;}
.container-imgs-list img {height: 222px;width: 222px;}
.container-imgs-list {overflow: initial !important;display: flex;flex-wrap: nowrap;justify-content: left;padding: 0;flex-direction: row-reverse;}          
.container-imgs-list .image_item {width: 222px;height: 222px;transform: rotate(90deg);}
.container-imgs-list .image_column {display: flex;margin: 10px;flex-direction: row-reverse;}
button#moveLeft {border-radius:10px;width:50px;height:40px;font-size:22px;margin-right:10px;color:#f0ffff;background:#2196F3;cursor: pointer;}
button#moveRight {border-radius: 10px;width: 50px;height: 40px;font-size: 22px;margin-right: 10px;color: #f0ffff;background: #2196F3;cursor: pointer;}
.container-imgs-list .image_column {display: inline;transform: rotate(270deg);flex-direction: row-reverse;}
#imageList > div:nth-child(5) {left: 380px;top: -130px;position: relative;}
.container-imgs-list .image_item.overflown {opacity: 0;transform: scale(.4);}
.container-imgs-list {border: 0;}
</style>              
</div></div>
  
<div class="container-imgs-list" style="max-height: 200px; margin-top: 0px" id="imageList">
{switch_forum_images.SCRIPTS}
</div></div></div></div>
<!-- END switch_forum_images -->


Save and publish

After installation, you can modify the colors of the slideshow using the CSS code inside the template,


We hope you like this great little Trick and Tip on how to make the change .

As always, good job.

Please delete this message that I forgot to edit instead of posting another one, I apologize.

@كونان2000 Can you make the prefixes appear in their corresponding color?



Should I open a topic in support?

Wizzard wrote:As always, good job.

thank you @Wizzard
I'm glad you liked it

perlesias wrote: @كونان2000  Can you make the prefixes appear in their corresponding color?



Should I open a topic in support?

hi  @perlesias
Yes

If you have any problems Please open a new topic and ask for help making sure you give your forum URL and a link to this topic.

Technically no since it is not an official tutorial.  It is best to ask for help here since the author of the tutorial posted it.

SLGray wrote:Technically no since it is not an official tutorial.  It is best to ask for help here since the author of the tutorial posted it.

hi SLGray
Member perlesias has no problem with the slideshow.

Wants to modify the prefix code to fit the slideshow

This is a separate code

Great job

كونان2000 wrote:

SLGray wrote:Technically no since it is not an official tutorial.  It is best to ask for help here since the author of the tutorial posted it.

hi SLGray
Member perlesias has no problem with the slideshow.

Wants to modify the prefix code to fit the slideshow

This is a separate code  

Oh.  Thanks for the information.

TonnyKamper wrote:Great job

thank you TonnyKamper ^^  

SLGray wrote:Oh.  Thanks for the information.

You're welcome! 

Wishing you all a wonderful day