add red slideshow
+2
YoshiGM
كونان2000
6 posters
Page 1 of 1
add red slideshow
Hello everyone! ,
add red slideshow
_______________________________________
add red slideshow
_______________________________________
Red slideshow
- It moves automatically
- three groups
- Four image in each group
-----------------------------------
go to Administration Panel > GENERAL > Announcements
General announcements options
as in the picture
Click Add
Name: As you wish
Content * : Add slideshow code
- Code:
<style>
.mySlides-konan2000 {display: none;}
.mySlides-konan2000 img {
margin-right: 3px;
height: 145px;
width: 200px;
box-shadow: 0px 0px 5px 1px #f5005330;
border: dotted #FCE4EC 1px;
}
@media (max-width: 980px) {
.mySlides-konan2000 img {
height: 130px !important;
width: 22% !important;
}
}
.mySlides-konan2000 img:hover {
transform: scale(1.1);
box-shadow: 0px 0px 6px 0px #f44336;
border: solid #fff 5px;
}
#slideshow-left, #slideshow-right {
padding: 7px;
background: #cb004570;
position: absolute;
z-index: 100;
top: 30%;
color: #FFF;
font-size: 30px;
cursor: pointer;
}
#slideshow-left {
border-radius: 25px 0px 0px 25px;
right: 0;
}
#slideshow-right {
border-radius: 0px 25px 25px 0px;
left: 0;
}
.text-konan2000 {
background: #cb0045;
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
width: auto;
text-align: center;
}
.slideshow-container {
border: #cb0045 dotted 1px;
background: #8b878847;
overflow: hidden;
width: fit-content;
padding: 10px 5px;
position: relative;
margin: auto;
}
.textt-konan2000 {
font-size: 22px;
color: #0c0d0e;
text-align: center;
}
.mySlides-konan2000 {
text-align: center;
padding-top: 7px;
padding-bottom: 40px;
}
.dot-konan2000 {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active-konan2000 {
background-color: #717171;
}
.fadeD {
animation-name: fadeD;
animation-duration: 1.5s;
}
@keyframes fadeD {
from {transform: translate(-1000px, 0px);}
to {opacity: 1}
}
.fadeG {
animation-name: fadeG;
animation-duration: 1.5s;
}
@keyframes fadeG {
from {transform: translate(1000px, 0px);}
to {opacity: 1}
}
</style>
<div class="slideshow-container">
<div class="mySlides-konan2000">
<a href="link "> <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/aao_ao13.png" /> </a> <a href="link"> <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/icons-10.png" /> </a> <a href="link"> <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/12222210.jpg" /> </a> <a href="link"> <img src="https://2img.net/280x/i.servimg.com/u/f11/20/49/63/45/30ee3910.jpg" /> </a>
<div class="textt-konan2000">
مجموعة واحد1
</div>
</div>
<div class="mySlides-konan2000">
<a href="link "> <img src="https://2img.net/r/frmste/images/sigle.png" /> </a> <a href="link"> <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" /> </a>
<div class="textt-konan2000">
مجموعة ثنين2
</div>
</div>
<div class="mySlides-konan2000">
<a href="link "> <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" /> </a> <a href="link"> <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" /> </a>
<div class="textt-konan2000">
مجموعة ثلاثه3
</div>
</div>
<div class="text-konan2000">
اعلانات المنتدى
</div>
<div id="slideshow-left">
❮
</div>
<div id="slideshow-right">
❯
</div>
</div><br />
<div style="text-align:center">
<span class="dot-konan2000"></span> <span class="dot-konan2000"></span> <span class="dot-konan2000"></span>
</div>
<script>
const slides = document.getElementsByClassName("mySlides-konan2000");
const dots = document.getElementsByClassName("dot-konan2000");
let timeoutID;
let slideIndex = 1;
let hovering = false;
showSlides();
function resetSlide() {
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
slides[i].classList.remove("fadeD", "fadeG");
}
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove("active-konan2000");
}
}
function nextSlide() {
resetSlide();
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].classList.add("fadeD");
}
function prevSlide() {
resetSlide();
slideIndex--;
if (slideIndex < 1) {
slideIndex = slides.length;
}
slides[slideIndex - 1].classList.add("fadeG");
}
function showSlides() {
if (!hovering) {
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].classList.add("active-konan2000");
timeoutID = setTimeout(() => {
nextSlide();
showSlides();
}, 5000); // Change image every 5 seconds
}
}
$('.dot-konan2000').click(function () {
clearInterval(timeoutID);
slideIndex = $('.dot-konan2000').index(this);
nextSlide();
showSlides();
});
$('#slideshow-left').click(function () {
clearInterval(timeoutID);
prevSlide();
showSlides();
});
$('#slideshow-right').click(function () {
clearInterval(timeoutID);
nextSlide();
showSlides();
});
$('.mySlides-konan2000').hover(
function () {
hovering = true;
clearTimeout(timeoutID);
},
function () {
hovering = false;
showSlides();
}
);
</script>
---------------
You can also add slideshow code on the home page.
go to Administration Panel > DISPLAY > Generalities > Homepage message ..
Add slideshow code
Don't forget to press save
---------------
replace
|
replace
|
Important note
- It is not appropriate to put two slideshows on the same page
- It is not appropriate to add slideshow in templates
I hope you will love this cute trick ◔◡◔
____________________________
The blue and red slideshow is designed by: كونان2000,
The left and right arrows have been added to the slideshow by: Toryudo
Last edited by كونان2000 on April 27th 2024, 1:33 am; edited 8 times in total
Ape, keko_ferkeko, sivastar, BlackScorpion, SarkZKalie, TonnyKamper, Jucarese and like this post
Re: add red slideshow
Re: add red slideshow
I can give the others two, i have an yellow one and a green one... it was made by skoulikiكونان2000 wrote:[Thanks @Mihai ^^,
Yes, your picture was taken from the Romanian support forum
Your photo is beautiful and fit for the red slideshow
skouliki and كونان2000 like this post
Re: add red slideshow
skouliki is an expert using PhotoshopMihai wrote:I can give the others two, i have an yellow one and a green one... it was made by skouliki
Thank you Mihai ^^
_____________________________
+
My first post has been updated
The Announcements for the AwesomeBB version have been fixed
https://forum.forumactif.com/t408470-probleme-avec-la-version-de-awesomebb-hauteur-de-la-zone-d-annonces
skouliki, BlackScorpion and TonnyKamper like this post
Re: add red slideshow
cant complain about that ahah, and that also is 100% true... if it was not her, i dunno what i can do withour herكونان2000 wrote:skouliki is an expert using Photoshop
Thank you Mihai ^^
skouliki, TonnyKamper and كونان2000 like this post
Re: add red slideshow
Thanks for the code and the good words
TonnyKamper, Mihai and كونان2000 like this post
Re: add red slideshow
me too like youMihai wrote:cant complain about that ahah, and that also is 100% true... if it was not her, i dunno what i can do withour her
I don't know anything about design and photo editing
you deserve the bestskouliki wrote:Thanks for the code and the good words
skouliki, TonnyKamper and كونان2000 like this post
Re: add red slideshow
I edit stuff too, but only a background from a picture with Paint 3Dكونان2000 wrote:me too like you
I don't know anything about design and photo editing
كونان2000 likes this post
Re: add red slideshow
Would it be possible to adapt the code so that the four images of the last posts in the forums to choose are automatically added, instead of putting the urls of the images manually in the code?
perlesias- Forumember
- Posts : 213
Reputation : 7
Language : spanish
Re: add red slideshow
hi @perlesias
Yes, that's possible, but it might cause some issues,
especially if your forum is active,
and requires placing images in posts regularly to be automatically moved to the slideshow. It's better to handle this manually to ensure accuracy and avoid problems. If you prefer to automate it, it would be advisable to implement it in a separate code rather than directly integrating it into the slideshow.
Yes, that's possible, but it might cause some issues,
especially if your forum is active,
and requires placing images in posts regularly to be automatically moved to the slideshow. It's better to handle this manually to ensure accuracy and avoid problems. If you prefer to automate it, it would be advisable to implement it in a separate code rather than directly integrating it into the slideshow.
Re: add red slideshow
كونان2000 wrote:hi @perlesias
Yes, that's possible, but it might cause some issues,
especially if your forum is active,
and requires placing images in posts regularly to be automatically moved to the slideshow. It's better to handle this manually to ensure accuracy and avoid problems. If you prefer to automate it, it would be advisable to implement it in a separate code rather than directly integrating it into the slideshow.
That's great, it would be fantastic to be able to make an automatic slider with the images of the latest forum posts (f10, f4) of my forum.
perlesias- Forumember
- Posts : 213
Reputation : 7
Language : spanish
كونان2000 likes this post
Re: add red slideshow
hi @perlesias
I made one suitable for the AwesomeBB version
It automatically places an image with the topic title
But you must put a big picture for each new topic
Also, only the first three topics of the specified section are counted
I sent you a private message
I made one suitable for the AwesomeBB version
It automatically places an image with the topic title
But you must put a big picture for each new topic
Also, only the first three topics of the specified section are counted
I sent you a private message
Last edited by كونان2000 on July 21st 2024, 5:11 am; edited 1 time in total
TonnyKamper and perlesias like this post
Re: add red slideshow
Good work Conan. We are impressed at your accomplishment.
كونان2000 likes this post
Re: add red slideshow
كونان2000 wrote:hi @perlesias
I made one suitable for the AwesomeBB version
It automatically places an image with the topic title
But you must put a big picture for each new topic
Also, only the first three topics of the specified section are counted
I sent you a private message
Thank you very much friend, I will try it to see how it turns out.
perlesias- Forumember
- Posts : 213
Reputation : 7
Language : spanish
كونان2000 likes this post
Re: add red slideshow
@كونان2000 One question, would it be possible to upload more images, instead of three per group, could there be 9?
perlesias- Forumember
- Posts : 213
Reputation : 7
Language : spanish
Re: add red slideshow
hi @perlesiasperlesias wrote: @كونان2000 One question, would it be possible to upload more images, instead of three per group, could there be 9?
It's not advisable to upload more than three images per group as it may clutter the slideshow. so it's best to stick with three
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum