Hello All
The following tutorial will help you change the appearance of your most recently shared images into a slide show.
https://i.postimg.cc/dvnWNF2M/Animation.gif
-------------------------------------
The following tutorial will help you change the appearance of your most recently shared images into a slide show.
https://i.postimg.cc/dvnWNF2M/Animation.gif
-------------------------------------
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
|
|
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 -->
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 .
___________________________________________________________________
"This program is available for use and distribution freely, provided that the source is acknowledged."
"This program is available for use and distribution freely, provided that the source is acknowledged."
Last edited by كونان2000 on September 17th 2024, 5:10 am; edited 1 time in total