طريقة تجزئة الهيدر و جعله متحرك

4 مشترك

اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف Fish Club الإثنين 10 أكتوبر 2022 - 17:54

السلام عليكم و رحمة الله و بركاته


أخباركم شباب ؟


كنت محتاج كود يقوم بتقسيم الهيدر لأكثر من صورة , مثلاً خلفية و اللوجو
لكني اريد اخلي اللوجو صور متغيرة مثلاً 3 صورة بتتالى 


نفس نظام الإعلانات في احلى منتدى


مثال لموقع اللي محتاج شكل الكود مثله : https://www.chewy.com


و شكراً  Cool Laughing
Fish Club
Fish Club
 
 

ذكر
عدد المساهمات : 65
معدل النشاط : 886
السُمعة : 1

https://betta.yoo7.com

ابوعلي البلقاوي يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف كونان2000 الإثنين 10 أكتوبر 2022 - 19:59

وعليكم السلام ورحمة الله وبراكاته
هلا اخي  @Fish Club

انا ركبت  هيدر لما تضغط على السهم تتغير الصور

هل هو مناسب ام لا


عدل سابقا من قبل كونان2000 في الثلاثاء 11 أكتوبر 2022 - 17:49 عدل 1 مرات
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1742
معدل النشاط : 3593
السُمعة : 309

https://anime.forumperso.com/

ابوعلي البلقاوي و Fish Club يعجبهم هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف Fish Club الإثنين 10 أكتوبر 2022 - 20:35

كونان2000 كتب:وعليكم السلام ورحمة الله وبراكاته
هلا اخي  @Fish Club

انا ركبت  هيدر لما تضغط على السهم تتغير الصور

هل هو مناسب ام لا

جميل كونان تسلم ايدك  Cool clown


لكن يا ريت تعديل بسيط بس


تحت الهيدر الصور المستخدمه الاعلانات عليها

فيا إما نخفي هذه الصور ، او اننا نخلي الاعلانات تحتها
Fish Club
Fish Club
 
 

ذكر
عدد المساهمات : 65
معدل النشاط : 886
السُمعة : 1

https://betta.yoo7.com

ابوعلي البلقاوي يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف كونان2000 الثلاثاء 11 أكتوبر 2022 - 3:44

هلا اخي  @Fish Club
حذفت الصور الي تحت
drunken
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1742
معدل النشاط : 3593
السُمعة : 309

https://anime.forumperso.com/

Fish Club يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف Fish Club الثلاثاء 11 أكتوبر 2022 - 10:28

كونان2000 كتب:هلا اخي  @Fish Club
حذفت الصور الي تحت
drunken

جميل تسلم ايدك  clown
Fish Club
Fish Club
 
 

ذكر
عدد المساهمات : 65
معدل النشاط : 886
السُمعة : 1

https://betta.yoo7.com

ابوعلي البلقاوي يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف ابوعلي البلقاوي الثلاثاء 11 أكتوبر 2022 - 11:11

Fish Club كتب:
كونان2000 كتب:هلا اخي  @Fish Club
حذفت الصور الي تحت
drunken

جميل تسلم ايدك  clown

هل تم الحل اخي
ابوعلي البلقاوي
ابوعلي البلقاوي
اشراف عام المساعدة
اشراف عام المساعدة

ذكر
عدد المساهمات : 2430
معدل النشاط : 8499
السُمعة : 29

https://help.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف Fish Club الثلاثاء 11 أكتوبر 2022 - 11:33

ابوعلي البلقاوي كتب:
Fish Club كتب:
كونان2000 كتب:هلا اخي  @Fish Club
حذفت الصور الي تحت
drunken

جميل تسلم ايدك  clown

هل تم الحل اخي

لسه منتظر كونان يرسل الكود  Rolling Eyes
Fish Club
Fish Club
 
 

ذكر
عدد المساهمات : 65
معدل النشاط : 886
السُمعة : 1

https://betta.yoo7.com

ابوعلي البلقاوي يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف كونان2000 الثلاثاء 11 أكتوبر 2022 - 17:31

Fish Club كتب:
هل تم الحل اخي

لسه منتظر كونان يرسل الكود  Rolling Eyes
والله اسف اخي عالتأخر  Embarassed
انشغلت شويه (●ˇ∀ˇ●)
------

طريقة التركيب
ابحث في الهيدر عنالكود التالي
الكود:
<div id="header-banner">
    <div class="wrap">
        <!-- BEGIN switch_desc -->
        <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
        <!-- END switch_desc -->
    </div>
</div>

احذفه وضع مكانه التالي
الكود:
<div id="header-banner">
  <!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>


<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
    <img src="https://2img.net/u/1915/13/16/66/avatars/2-77.jpg" style="height: 200px;width: 100%;">
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 6</div>
    <img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" style="height: 200px;width: 100%;">
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 6</div>
    <img src="https://2img.net/u/1811/68/54/94/avatars/223857-5.png" style="height: 200px;width: 100%;">
  </div>
   
  <div class="mySlides">
    <div class="numbertext">4 / 6</div>
    <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" style="height: 200px;width: 100%;">
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 6</div>
    <img src="https://2img.net/u/1811/68/54/94/avatars/151904-87.png" style="height: 200px;width: 100%;">
  </div>
   
  <div class="mySlides">
    <div class="numbertext">6 / 6</div>
    <img src="https://2img.net/u/1811/68/54/94/avatars/2-98.jpg" style="height: 200px;width: 100%;">
  </div>
   
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>


</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
   
</body>
</html>
</div>

ثم ضع االتالي في الcss
الكود:
body {
  font-family: Arial;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}


.container {
  position: relative;
}


.mySlides {
  display: none;
}




.column {
    display: flex;
    float: right;
    width: 16.66%;
    justify-content: center;
}
.cursor {
  cursor: pointer;
}

.row {
    margin: auto !important;
}
.prev, .next {
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


.prev {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.next {
    left: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


.caption-container {
    text-align: center;
    background-color: #222;
    padding: 0px;
    color: white;
}

.container {
    width: auto !important;
}
.container {
    padding: inherit !important;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1742
معدل النشاط : 3593
السُمعة : 309

https://anime.forumperso.com/

Fish Club يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف Fish Club الثلاثاء 11 أكتوبر 2022 - 17:37

كونان2000 كتب:
Fish Club كتب:
هل تم الحل اخي

لسه منتظر كونان يرسل الكود  Rolling Eyes
والله اسف اخي عالتأخر  Embarassed
انشغلت شويه (●ˇ∀ˇ●)
------

طريقة التركيب
ابحث في الهيدر عنالكود التالي
الكود:
<div id="header-banner">
    <div class="wrap">
        <!-- BEGIN switch_desc -->
        <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
        <!-- END switch_desc -->
    </div>
</div>

احذفه وضع مكانه التالي
الكود:
<div id="header-banner">
  <!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>


<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
    <img src="https://2img.net/u/1915/13/16/66/avatars/2-77.jpg" style="height: 200px;width: 100%;">
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 6</div>
    <img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" style="height: 200px;width: 100%;">
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 6</div>
    <img src="https://2img.net/u/1811/68/54/94/avatars/223857-5.png" style="height: 200px;width: 100%;">
  </div>
    
  <div class="mySlides">
    <div class="numbertext">4 / 6</div>
    <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" style="height: 200px;width: 100%;">
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 6</div>
    <img src="https://2img.net/u/1811/68/54/94/avatars/151904-87.png" style="height: 200px;width: 100%;">
  </div>
    
  <div class="mySlides">
    <div class="numbertext">6 / 6</div>
    <img src="https://2img.net/u/1811/68/54/94/avatars/2-98.jpg" style="height: 200px;width: 100%;">
  </div>
    
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>


</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
    
</body>
</html>
</div>

ثم ضع االتالي في الcss
الكود:
body {
  font-family: Arial;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}


.container {
  position: relative;
}


.mySlides {
  display: none;
}




.column {
    display: flex;
    float: right;
    width: 16.66%;
    justify-content: center;
}
.cursor {
  cursor: pointer;
}

.row {
    margin: auto !important;
}
.prev, .next {
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}


.prev {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.next {
    left: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


.caption-container {
    text-align: center;
    background-color: #222;
    padding: 0px;
    color: white;
}

.container {
    width: auto !important;
}
.container {
    padding: inherit !important;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


ولا يهمك كونان ^^
سؤال الأول في التومبيلات صح
Fish Club
Fish Club
 
 

ذكر
عدد المساهمات : 65
معدل النشاط : 886
السُمعة : 1

https://betta.yoo7.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف كونان2000 الثلاثاء 11 أكتوبر 2022 - 17:46

Fish Club كتب:
سؤال الأول في التومبيلات صح
نعم clown
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1742
معدل النشاط : 3593
السُمعة : 309

https://anime.forumperso.com/

Fish Club يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف Fish Club الثلاثاء 11 أكتوبر 2022 - 17:51

كونان2000 كتب:
Fish Club كتب:
سؤال الأول في التومبيلات صح
نعم clown

تمام انا جربته و شغال تمام



شكراً لك كونان


دمت بود  clown Cool
Fish Club
Fish Club
 
 

ذكر
عدد المساهمات : 65
معدل النشاط : 886
السُمعة : 1

https://betta.yoo7.com

ابوعلي البلقاوي و كونان2000 يعجبهم هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

طريقة تجزئة الهيدر و جعله متحرك Empty رد: طريقة تجزئة الهيدر و جعله متحرك

مُساهمة من طرف العود السعودية الثلاثاء 11 أكتوبر 2022 - 18:37

يعطيك العاااافيه
العود السعودية
العود السعودية
 
 

انثى
عدد المساهمات : 159
معدل النشاط : 1127
السُمعة : 3

https://twitter.com/Amany1450

Fish Club يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى