add red slideshow or Blue Slideshow
4 posters
Page 1 of 1
add red slideshow or Blue Slideshow
by كونان2000 March 11th 2023, 2:12 am
Hello everyone! 
,
add red slideshow or Blue Slideshow
_______________________________________
,add red slideshow or Blue Slideshow
_______________________________________
Red slideshow
- It moves automatically
Animated slideshow preview: https://i.postimg.cc/7LhnH8vV/froru2.gif - three groups
- Four image in each group
Blue slideshow
- moves manually
- 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
- red slideshow code:
- Code:
<style>
.mySlides-konan2000 {display: none;}
.mySlides-konan2000 img {
margin-right: 3px;
height: 145px;
width: 200px;
box-shadow: 0px 0px 6px 0px #f44336;
border: solid #fff 5px;
}
@media (max-width: 800px) {
.mySlides-konan2000 img {
height: 145px !important;
width: 23% !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: #ff085c7a;
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: #e91e63;
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
width: auto;
text-align: center;
}
.slideshow-container {
border: #e91e63 1px dashed;
background: #d9d9d9;
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/u/1811/68/54/94/avatars/223332-19.jpg" /> </a> <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/i/fa/i/avatars/gallery/Divers/Divers_66.jpg" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/34486-59.jpg" /> </a>
<div class="textt-konan2000">
Group 111
</div>
</div>
<div class="mySlides-konan2000">
<a href="link "> <img src="https://2img.net/u/1811/68/54/94/avatars/216956-98.jpg" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/214917-20.jpg" /> </a> <a href="link"> <img src="https://i.servimg.com/u/f68/11/48/38/31/avatar11.png" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/223918-20.png" /> </a>
<div class="textt-konan2000">
Group 222
</div>
</div>
<div class="mySlides-konan2000">
<a href="link "> <img src="https://2img.net/u/1811/68/54/94/avatars/191511-5.png" /> </a> <a href="link"> <img src="https://i.servimg.com/u/f76/14/33/36/68/untitl82.png" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/14492-26.png" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/223054-10.jpg" /> </a>
<div class="textt-konan2000">
Group 333
</div>
</div>
<div class="text-konan2000">
Forum announcements
</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;
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() {
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].classList.add("active-konan2000");
timeoutID = setTimeout(() => {
nextSlide();
showSlides();
}, 5000); // Change image every 2 seconds
}
$('.dot-konan2000').click(function(){
clearTimeout(timeoutID);
console.log(slideIndex);
slideIndex = $('.dot-konan2000').index(this);
console.log(slideIndex);
nextSlide();
showSlides();
});
$('#slideshow-left').click(function(){
clearTimeout(timeoutID);
prevSlide();
showSlides();
});
$('#slideshow-right').click(function(){
clearTimeout(timeoutID);
nextSlide();
showSlides();
});
</script>
- Blue slideshow code:
- Code:
<style>
.mySlides-conan2000 {display: none;}
.mySlides-conan2000 img {
margin-right: 3px;
height: 145px;
width: 200px;
box-shadow: 0px 0px 6px 0px #2196f3;
border: solid #fff 5px;
}
@media (max-width: 800px) {
.mySlides-conan2000 img {
height: 145px !important;
width: 23% !important;
}
}
.mySlides-conan2000 img:hover {
transform: scale(1.1);
box-shadow: 0px 0px 6px 0px #000;
border: solid #fff 5px;
}
#slideshow-left, #slideshow-right {
padding: 7px;
background: #0cc7b78c;
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-conan2000 {
background: #064f89;
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
width: auto;
text-align: center;
}
.slideshow-container {
border: #7b838b 1px dashed;
background: #d9d9d9;
overflow: hidden;
width: fit-content;
padding: 10px 5px;
position: relative;
margin: auto;
}
.textt-conan2000 {
font-size: 22px;
color: #0c0d0e;
text-align: center;
}
.mySlides-conan2000 {
text-align: center;
padding-top: 7px;
padding-bottom: 40px;
}
.dot-conan2000 {
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-conan2000 {
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-conan2000">
<a href="link "> <img src="https://2img.net/u/1811/68/54/94/avatars/223332-19.jpg" /> </a> <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/i/fa/i/avatars/gallery/Divers/Divers_66.jpg" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/34486-59.jpg" /> </a>
<div class="textt-conan2000">
Group 111
</div>
</div>
<div class="mySlides-conan2000">
<a href="link "> <img src="https://2img.net/u/1811/68/54/94/avatars/216956-98.jpg" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/214917-20.jpg" /> </a> <a href="link"> <img src="https://i.servimg.com/u/f68/11/48/38/31/avatar11.png" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/223918-20.png" /> </a>
<div class="textt-conan2000">
Group 222
</div>
</div>
<div class="mySlides-conan2000">
<a href="link "> <img src="https://2img.net/u/1811/68/54/94/avatars/191511-5.png" /> </a> <a href="link"> <img src="https://i.servimg.com/u/f76/14/33/36/68/untitl82.png" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/14492-26.png" /> </a> <a href="link"> <img src="https://2img.net/u/1811/68/54/94/avatars/223054-10.jpg" /> </a>
<div class="textt-conan2000">
Group 333
</div>
</div>
<div class="text-conan2000">
Forum announcements
</div>
<div id="slideshow-left">
❮
</div>
<div id="slideshow-right">
❯
</div>
</div><br />
<div style="text-align:center">
<span class="dot-conan2000"></span> <span class="dot-conan2000"></span> <span class="dot-conan2000"></span>
</div><script>
const slides = document.getElementsByClassName("mySlides-conan2000");
const dots = document.getElementsByClassName("dot-conan2000");
let timeoutID;
let slideIndex = 1;
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-conan2000");
}
}
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() {
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].classList.add("active-conan2000");
timeoutID = setTimeout(() => {
nextSlide();
showSlides();
}, 99999999999999); // Change image every 2 seconds
}
$('.dot-conan2000').click(function(){
clearTimeout(timeoutID);
console.log(slideIndex);
slideIndex = $('.dot-conan2000').index(this);
console.log(slideIndex);
nextSlide();
showSlides();
});
$('#slideshow-left').click(function(){
clearTimeout(timeoutID);
prevSlide();
showSlides();
});
$('#slideshow-right').click(function(){
clearTimeout(timeoutID);
nextSlide();
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 March 18th 2023, 12:25 am; edited 4 times in total
كونان2000- Forumember
-
Posts : 137
Reputation : 66
Language : Arabic -
Ape, sivastar, BlackScorpion, SarkZKalie, TonnyKamper and jucarese like this post
Re: add red slideshow or Blue Slideshow
by YoshiGM March 11th 2023, 4:39 pm
Looks very modern and cool.
Thanks for the codes ^^
Thanks for the codes ^^
YoshiGM- Active Poster
-
Posts : 1361
Reputation : 137
Language : Spanish & English
Location : Mexico -
كونان2000 likes this post
Re: add red slideshow or Blue Slideshow
by Mihai March 12th 2023, 12:41 am
I like how you get my photo, most probably from romanian support forum or from hereكونان2000 wrote:
Mihai- Forumember
- Posts : 638
Reputation : 28
Language : Romanian, English
Location : Bucharest, Romania -
Mati and كونان2000 like this post
Re: add red slideshow or Blue Slideshow
by كونان2000 March 12th 2023, 3:52 pm
Thanks @YoshiGM ,YoshiGM wrote:Looks very modern and cool.
Thanks for the codes ^^
I'm glad you like it ! ^^
Thanks @Mihai ^^,Mihai wrote:I like how you get my photo, most probably from romanian support forum or from hereكونان2000 wrote:
Yes, your picture was taken from the Romanian support forum
Your photo is beautiful and fit for the red slideshow
كونان2000- Forumember
- Posts : 137
Reputation : 66
Language : Arabic -
Re: add red slideshow or Blue Slideshow
by Mihai March 12th 2023, 4:04 pm
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
Mihai- Forumember
- Posts : 638
Reputation : 28
Language : Romanian, English
Location : Bucharest, Romania -
skouliki and كونان2000 like this post
Re: add red slideshow or Blue Slideshow
by كونان2000 March 18th 2023, 12:41 am
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
كونان2000- Forumember
- Posts : 137
Reputation : 66
Language : Arabic -
skouliki, BlackScorpion and TonnyKamper like this post
Re: add red slideshow or Blue Slideshow
by Mihai March 18th 2023, 12:59 am
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 ^^
Mihai- Forumember
- Posts : 638
Reputation : 28
Language : Romanian, English
Location : Bucharest, Romania -
skouliki, TonnyKamper and كونان2000 like this post
Re: add red slideshow or Blue Slideshow
by skouliki March 18th 2023, 8:24 am
Thanks for the code and the good words
skouliki- Manager
-
Posts : 13598
Reputation : 1605
Language : English,Greek
Location : Greece -
TonnyKamper, Mihai and كونان2000 like this post
Re: add red slideshow or Blue Slideshow
by كونان2000 March 19th 2023, 8:04 pm
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
كونان2000- Forumember
- Posts : 137
Reputation : 66
Language : Arabic -
skouliki, TonnyKamper and كونان2000 like this post
Re: add red slideshow or Blue Slideshow
by Mihai March 19th 2023, 8:34 pm
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
Mihai- Forumember
- Posts : 638
Reputation : 28
Language : Romanian, English
Location : Bucharest, Romania -
كونان2000 likes this post
Similar topicsPage 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
