رفتن به مطلب
پشتیبانی سایت ساز IPB/IPS فارسی
خدمات و محتویات منتشر یافته در IPSFarsi

درخواست هیدر متحرک برای قالب GameTime

نورنما

ارسال‌های توصیه شده

نورنما

نورنما 13

ارسال شده در
ارسال شده در

باسلام خدمت دوستان انجمن IPS

برای  قالب GameTime ، میخواستم هیدر اون متحرک باشه وچندتا تصویر رو از چپ به راست حرکت داده وتغییرشون بده ، کسی می تونه دراین زمینه کمکی بکنه 

باتشکر 

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • 4 هفته بعد...
  • تیم مدیریت/توسعه دهنده
محمد قاسمی

محمد قاسمی 1055

ارسال شده در
  • تیم مدیریت/توسعه دهنده
ارسال شده در

درود.

به دنبال افزونه Slider برای IPS باشید، در انجمن جستجو کنید، در صورت وجود نداشتن، از google به دنبال نسخه Null معتبر باشید و یا می توانید در بخش مربوطه، درخواست طراحی ارسال کنید تا بررسی شود.

با تشکر.

لینک ارسال
به اشتراک گذاری در سایت های دیگر
نورنما

نورنما 13

ارسال شده در
  • سازنده
ارسال شده در

سلام

افزونه مخصوص اسلایدر که دراین سایت وسایت مرجع گشتم ولی  پیدا نکردم (توی سایت مرجع فقط چندتا پولیش بود)

 

ولی این کدهارو پیداکردم

اولی :که مشکلش اینه که وقتی توی هدر اصلی سایت میگذارم ، تایمرش برای برخی صفحات مشکل ایجادمیکنه مثلا صفحه ای که بعدازارسال ایمیل فعال سازی نمایش داده میشه هی میپره! 

 

لذا مجبور شدم اونو  داخل page و بخش مدیریت بلوک در قسمت صفحه ها در (ویرایشگر کامل) بگذارم ، جواب میده ولی مشکلش اینه که فقط یکبارمصرفه ، بعداز گذاشتنش اونجا دیگه بایکبار ویرایش دوباره کلا ازکارمیافته وکدهای اون وتایمرکارنمیکنه !

 

بایدهمیشه داخل فایلی متنی کل کدهارو داشته باشم بعدش اونجا ویرایش و به این بخش کپی پیست کنم ! مشکل بعدیش هم اینکه دیگه پایینتراز هدر اینجوری قرارمیگیره .

مشکل بعدی هم اینکه کارباهاش برای کسی که سایتو تحویلش میدم کارباهاش برایش  سخته مثلا برای تغییر تصاویر باید بره تصویررو داخل هاست کپی پیست کنه وبعد اسم وادرس تصاویر رو تصحیح  کنه وبعدش اینو داخل ویراشگر کپی کنه ودنگ وفنگهای اینجوری که دردسر داره!یا بخواهد تعداد تصاویر رو کم وزیادترش کنه که دردسرداره! چیزی که مطلوبه اینکه ازهمون بخش مدیریت  مثلا 20 تا تصویر داخل هاست بریزم اون بصورت رندوم اونا رو نمایش بده!

  



<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>






<body>



<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="http://.....com/header1.jpg" style="width:100%">
  <div class="text">تصویر 1</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="http://.....com/header2.jpg" style="width:100%">
  <div class="text">تصویر 2</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="http://.....com/header3.jpg" style="width:100%">
  <div class="text">تصویر 3</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    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";
    setTimeout(showSlides, 6000); // Change image every 6 seconds
}
</script>

</body>

 

دومی:هم Slick Slider در لینک زیر هست که :

 

اینو هم درقالب گذاشتم کدهای css رو در custom.css و کدهای js رو در global template قرار میدم و کدهای html اونو داخل هدر  قرار میدم ولی درنتیجه  چندتا تصاویر پایین هم قرار میگیره و تایمر هم کارنمیکنه!

 

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • بنیان گذار IPSFarsi
وحید نامنی

وحید نامنی 12147

ارسال شده در
  • بنیان گذار IPSFarsi
ارسال شده در
در 6 ساعت قبل، نورنما گفته است :

افزونه مخصوص اسلایدر که دراین سایت وسایت مرجع گشتم ولی  پیدا نکردم (توی سایت مرجع فقط چندتا پولیش بود)

این رو تست کنید :

 

لینک ارسال
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

رفتن به فهرست موضوع ها

  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • اضافه کردن...