سلام دوستان
می خواستم روی اسلایدشو قسمتی ایجاد کنم که بتونم نکته توضیحی بنویسم.
مثل عکس زیر که در داخل کادر کوچک نوشته: پشتیبانی 24 ساعته
فایل پیوست 32791
نمایش نسخه قابل چاپ
سلام دوستان
می خواستم روی اسلایدشو قسمتی ایجاد کنم که بتونم نکته توضیحی بنویسم.
مثل عکس زیر که در داخل کادر کوچک نوشته: پشتیبانی 24 ساعته
فایل پیوست 32791
سلام ممنون بابت راهنمایی ولی این روش برای عکس و نه اسلایدشو
من هرکاری کردم نشد.
یه اسلایدشو 4 عکس دارم و می خواستم هر عکسی که در اسلایدشو میاد نوشته ای زیر یا بغلش بیاد.
ولی فعلا موفق نشدم.
بازم ممنون
سلام، ابتدا باید مشخص شود از چه اسکریپتی برای اسلایدشو استفاده میکنید.
اگر از کاربران سیستم وردپرس هستید پلاگینهای اسلایدر زیادی مثه Layer Slider وجود دارند که به شما این قابلیت رو میدند.نقل قول:
نوشته اصلی توسط abi2016
ممنون از راهنمایی دوستان
بالاخره کد این مورد پیدا کردم.
دوستانی که همین موضوع و مشکل دارند می توانند از کد زیر برای اینکار استفاده کنند:
البته این فقط فرم کلی کار هست و باید از استایل css و جاوا اسکریپت هم استفاده کنید که فرم کامل و درست کار نمایش داده شود.نقل قول:
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbertext">1 / 4</div>
<img src="mysite main/images/image_(4).jpg" style="width:100%">
<div class="text">عکس شماره 1</div>
</div>
<div class="myslides fade">
<div class="numbertext">2 / 4</div>
<img src="mysite main/images/image_(7).jpg" style="width:100%">
<div class="text">عکس شماره 2</div>
</div>
</div>
کد کامل براتون قرار میدم.
نقل قول:
<head>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
/* Slideshow container */
.slideshow-container {
max-width: 1200px;
position: relative;
margin: auto;
border: 5px #000000 outset;
}
/* Next & previous buttons */
.prev {
cursor: pointer;
position: absolute;
top: 43%;
left: -6%;
width: auto;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
cursor: pointer;
position: absolute;
right: -6%;
border-radius: 3px 0 0 3px;
top: 43%;
width: auto;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover {
background: url(left_over.png) no-repeat;
}
.next:hover {
background: url(right_over.png) no-repeat;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 30px;
font-weight: bold;
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 {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
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) {
.slprev, .slnext,.text {font-size: 11px}
}
</style>
</head>
<body>
<br/>
<br/>
<br/>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="MySite Main/Images/Image_(4).jpg" style="width:100%">
<div class="text">صداقت بالاترین چیزهاست</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="MySite Main/Images/Image_(7).jpg" style="width:100%">
<div class="text">زکات علم انتشار آن است</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="MySite Main/Images/Image_(38).jpg" style="width:100%">
<div class="text">مراقب خوبی های خودتان باشید</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="MySite Main/Images/Image_(42).jpg" style="width:100%">
<div class="text">انسانیت فراموش نشود</div>
</div>
<a class="prev" onclick="plusSlides(-1)"><img src="MySite Main/Images/left.png" width="58" height="102" alt=""></a>
<a class="next" onclick="plusSlides(1)"><img src="MySite Main/Images/right.png" width="58" height="102" alt=""></a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
</script>
</body>