The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

add red slideshow

+2
YoshiGM
كونان2000
6 posters

Go down

add red slideshow  Empty add red slideshow

Post by كونان2000 March 11th 2023, 2:12 am

Hello everyone! add red slideshow  Icon_biggrin,

add red slideshow
add red slideshow  Froru2
_______________________________________



Red slideshow
  1. It moves automatically
  2. three groups
  3. Four image in each group

-----------------------------------

go to Administration Panel > GENERAL > Announcements
General announcements options
as in the picture
add red slideshow  Aa_cia10

Click Add add red slideshow  3474235701
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>
Don't forget to press save
---------------

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
Code:
link
replace  with a  Link of your choice

replace
Code:
Slideshow image
replace  with a image of your choice


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
كونان2000
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

Ape, keko_ferkeko, sivastar, BlackScorpion, SarkZKalie, TonnyKamper, Jucarese and like this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by YoshiGM March 11th 2023, 4:39 pm

Looks very modern and cool.

Thanks for the codes ^^
YoshiGM
YoshiGM
Active Poster

Male Posts : 1560
Reputation : 146
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

كونان2000 likes this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by Mihai March 12th 2023, 12:41 am

كونان2000 wrote:add red slideshow  Froru216
I like how you get my photo, most probably from romanian support forum or from here Razz
Mihai
Mihai
Forumember

Male Posts : 944
Reputation : 38
Language : Romanian, English
Location : Bucharest, Romania

https://fgsuport.forumotion.com/

Mati and كونان2000 like this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by كونان2000 March 12th 2023, 3:52 pm

YoshiGM wrote:Looks very modern and cool.
Thanks for the codes ^^
Thanks @YoshiGM ,
I'm glad you like it ! ^^

Mihai wrote:
كونان2000 wrote:add red slideshow  Froru216
I like how you get my photo, most probably from romanian support forum or from here Razz
Thanks @Mihai ^^,
Yes, your picture was taken from the Romanian support forum
Your photo is beautiful and fit for the red slideshow Very Happy

loul
كونان2000
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by Mihai March 12th 2023, 4:04 pm

كونان2000 wrote:[Thanks @Mihai ^^,
Yes, your picture was taken from the Romanian support forum
Your photo is beautiful and fit for the red slideshow Very Happy

loul
I can give the others two, i have an yellow one and a green one... it was made by skouliki :wouhou:
Mihai
Mihai
Forumember

Male Posts : 944
Reputation : 38
Language : Romanian, English
Location : Bucharest, Romania

https://fgsuport.forumotion.com/

skouliki and كونان2000 like this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by كونان2000 March 18th 2023, 12:41 am

Mihai wrote:I can give the others two, i have an yellow one and a green one... it was made by skouliki :wouhou:
skouliki is an expert using Photoshop Very Happy

  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
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

skouliki, BlackScorpion and TonnyKamper like this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by Mihai March 18th 2023, 12:59 am

كونان2000 wrote:skouliki is an expert using Photoshop Very Happy

  Thank you Mihai ^^
cant complain about that ahah, and that also is 100% true... if it was not her, i dunno what i can do withour her huhohi
Mihai
Mihai
Forumember

Male Posts : 944
Reputation : 38
Language : Romanian, English
Location : Bucharest, Romania

https://fgsuport.forumotion.com/

skouliki, TonnyKamper and كونان2000 like this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by skouliki March 18th 2023, 8:24 am

Thanks for the code and the good words
skouliki
skouliki
Manager
Manager

Female Posts : 15355
Reputation : 1705
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper, Mihai and كونان2000 like this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by كونان2000 March 19th 2023, 8:04 pm

Mihai 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 huhohi
me too like you
I don't know anything about design and photo editing  Toothless


skouliki wrote:Thanks for the code and the good words
you deserve the best  ouou
كونان2000
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

skouliki, TonnyKamper and كونان2000 like this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by Mihai March 19th 2023, 8:34 pm

كونان2000 wrote:me too like you
I don't know anything about design and photo editing  Toothless
I edit stuff too, but only a background from a picture with Paint 3D
Mihai
Mihai
Forumember

Male Posts : 944
Reputation : 38
Language : Romanian, English
Location : Bucharest, Romania

https://fgsuport.forumotion.com/

كونان2000 likes this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by كونان2000 April 27th 2024, 1:27 am

hi
New update for the slide show code
1 The image movement stops while the cursor passes over the images
2 It has become more mobile friendly
add red slideshow  Aa_ci722
add red slideshow  Aa_ci723
كونان2000
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

SarkZKalie likes this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by perlesias July 16th 2024, 10:08 am

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? Think
perlesias
perlesias
Forumember

Posts : 213
Reputation : 7
Language : spanish

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by كونان2000 July 16th 2024, 8:10 pm

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.
كونان2000
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by perlesias July 17th 2024, 9:59 am

كونان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. banana
perlesias
perlesias
Forumember

Posts : 213
Reputation : 7
Language : spanish

كونان2000 likes this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by كونان2000 July 17th 2024, 8:30 pm

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


Last edited by كونان2000 on July 21st 2024, 5:11 am; edited 1 time in total
كونان2000
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

TonnyKamper and perlesias like this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by keko_ferkeko July 19th 2024, 9:25 am

Good work Conan. We are impressed at your accomplishment.
avatar
keko_ferkeko
New Member

Male Posts : 20
Reputation : 0
Language : arabic

http://nf-son.forumotion.com

كونان2000 likes this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by كونان2000 July 19th 2024, 4:52 pm

thank you keko_ferkeko :rose:
add red slideshow  Oops
كونان2000
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by perlesias July 22nd 2024, 11:08 am

كونان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. Hello
perlesias
perlesias
Forumember

Posts : 213
Reputation : 7
Language : spanish

كونان2000 likes this post

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by perlesias July 23rd 2024, 4:50 pm

@كونان2000 One question, would it be possible to upload more images, instead of three per group, could there be 9?
perlesias
perlesias
Forumember

Posts : 213
Reputation : 7
Language : spanish

Back to top Go down

add red slideshow  Empty Re: add red slideshow

Post by كونان2000 July 23rd 2024, 6:09 pm

perlesias wrote: @كونان2000 One question, would it be possible to upload more images, instead of three per group, could there be 9?
hi @perlesias

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

كونان2000
كونان2000
Forumember

Male Posts : 279
Reputation : 115
Language : Arabic

https://anime.forumperso.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum