shayan 116 ارسال شده در شهریور 97 گزارش بازنشر ارسال شده در شهریور 97 (ویرایش شده) سلام و درود خدمت اساتید گرام من یه چیزی تو ذهنم هست نمیدونم جواب میده یا خیر <div class="g-before-after" id="RF"><img src="img/1.jpg" data-aftersrc="img/2.jpg"></div> میخوام یه دستوری نوشته بشه تا بعد از گذشت فرضا 100 ثانیه و با افکت فید به صورت همزمان "img/1.jpg" و "img/2.jpg" تبدیل بشن به "img/3.jpg" و "img/4.jpg" تقریبا مشابه یک اسلایدر عمل کنن با این تفاوت صرفا و صرفا src ها تغییر کنه نه محموعه این خط div که نوشتم آیا امکانپذیر هست؟ ویرایش شده شهریور 97 توسط shayan نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 97 گزارش بازنشر ارسال شده در شهریور 97 در 6 ساعت قبل، shayan گفته است : سلام و درود خدمت اساتید گرام من یه چیزی تو ذهنم هست نمیدونم جواب میده یا خیر <div class="g-before-after" id="RF"><img src="img/1.jpg" data-aftersrc="img/2.jpg"></div> میخوام یه دستوری نوشته بشه تا بعد از گذشت فرضا 100 ثانیه و با افکت فید به صورت همزمان "img/1.jpg" و "img/2.jpg" تبدیل بشن به "img/3.jpg" و "img/4.jpg" تقریبا مشابه یک اسلایدر عمل کنن با این تفاوت صرفا و صرفا src ها تغییر کنه نه محموعه این خط div که نوشتم آیا امکانپذیر هست؟ سلام . اینکه تغییر عکس ایجاد بشه هر چند ثانیه میشه . این آدرس تقریبا چیزیکه که مدنظرتونه . https://stackoverflow.com/questions/35720652/jquery-how-to-change-image-after-time-with-fadein 2 نقل قول لینک به ارسال
shayan 116 ارسال شده در شهریور 97 مالک گزارش بازنشر ارسال شده در شهریور 97 در 37 دقیقه قبل، Mirrajabi گفته است : سلام . اینکه تغییر عکس ایجاد بشه هر چند ثانیه میشه . این آدرس تقریبا چیزیکه که مدنظرتونه . https://stackoverflow.com/questions/35720652/jquery-how-to-change-image-after-time-with-fadein ممنونم من آشنایی با این کدها ندارم میشه کامل توضیح بدید چطور اجرا کنم؟ نقل قول لینک به ارسال
mehran-b 2385 ارسال شده در شهریور 97 گزارش بازنشر ارسال شده در شهریور 97 در 28 دقیقه قبل، shayan گفته است : میشه کامل توضیح بدید چطور اجرا کنم؟ سلام و درود طبق کدی که جناب @Mirrajabi معرفی کردن احتیاج به data-aftersrc نیست و نام عکس ها رو در آرایه داخل کد جاوا اسکریپت باید ذخیره کنید. (function($) { $(function() { var images = ['1.jpg','2.jpg','3.jpg', '4.jpg'], index = 0, maxImages = images.length - 1; var timer = setInterval(function() { var currentImage = images[index]; index = (index == maxImages) ? 0 : ++index; $('#RF img').fadeOut(200, function() { $('#RF img').attr("src", 'img/'+currentImage); $('#RF img').fadeIn(200); }); }, 2000); }); })(jQuery); 1 نقل قول لینک به ارسال
shayan 116 ارسال شده در شهریور 97 مالک گزارش بازنشر ارسال شده در شهریور 97 در 5 ساعت قبل، mehran-be گفته است : سلام و درود طبق کدی که جناب @Mirrajabi معرفی کردن احتیاج به data-aftersrc نیست و نام عکس ها رو در آرایه داخل کد جاوا اسکریپت باید ذخیره کنید. (function($) { $(function() { var images = ['1.jpg','2.jpg','3.jpg', '4.jpg'], index = 0, maxImages = images.length - 1; var timer = setInterval(function() { var currentImage = images[index]; index = (index == maxImages) ? 0 : ++index; $('#RF img').fadeOut(200, function() { $('#RF img').attr("src", 'img/'+currentImage); $('#RF img').fadeIn(200); }); }, 2000); }); })(jQuery); اینو گذاشتم ولی جواب نداد کدhtml من <div class="tv_parent"> <div class="g-before-after" id="RimiyaFx"><img src="img/1.jpg" data-aftersrc="img/2.jpg"></div> </div> من میخوام دقیقا همین div بالا رو استفاده کنم فقط مقدار src و data-aftersrc به صورت همزمان از "img/1.jpg" و "img/2.jpg" به ترتیب تبدیل بشه به "img/3.jpg" و "img/4.jpg" اینم کل دستورات فایل index.js $(document).ready(function($){ $("#RimiyaFx").beforeafter({ reset: true, }); }); (function($) { $(function() { var images = ['1.jpg','2.jpg','3.jpg', '4.jpg'], index = 0, maxImages = images.length - 1; var timer = setInterval(function() { var currentImage = images[index]; index = (index == maxImages) ? 0 : ++index; $('#RimiyaFx img').fadeOut(200, function() { $('#RimiyaFx img').attr("src", 'img/'+currentImage); $('#RimiyaFx img').fadeIn(200); }); }, 2000); }); })(jQuery); نقل قول لینک به ارسال
shayan 116 ارسال شده در شهریور 97 مالک گزارش بازنشر ارسال شده در شهریور 97 دوستان من در نهایت رسیدم به اسلایدر بوت استرپ و این کد html <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="g-before-after"><img class="img-fluid" src="img/1.jpg" data-aftersrc="img/2.jpg"></div> </div> <div class="carousel-item"> <div class="g-before-after"><img class="img-fluid" src="img/3.jpg" data-aftersrc="img/4.jpg"></div> </div> </div> </div> و این دستوران jqyery $(document).ready(function($){ $(".g-before-after").beforeafter({ reset: true, }); }); از این کتابخونه هم استفاده کردم اما نمیدونم چرا وقتی اسلایدر حرکت میکنه هیچی از اسلاید دوم نمایش داده نمیشه یه خطای ریز باید داشته باشه به نظرم!! نقل قول لینک به ارسال
mehran-b 2385 ارسال شده در شهریور 97 گزارش بازنشر ارسال شده در شهریور 97 سلام @shayan کدی که بنده ارسال کردم به تنهایی بدون هیچ کد اضافه ای (اون data-aftersrc هم پاک بشه) به احتمال 98 درصد کار میکنه. اسلایدر بوت استرپم ساختار خودشو دارم و من ازش اطلاعی ندارم. 1 نقل قول لینک به ارسال
shayan 116 ارسال شده در شهریور 97 مالک گزارش بازنشر ارسال شده در شهریور 97 در 2 ساعت قبل، mehran-be گفته است : سلام @shayan کدی که بنده ارسال کردم به تنهایی بدون هیچ کد اضافه ای (اون data-aftersrc هم پاک بشه) به احتمال 98 درصد کار میکنه. اسلایدر بوت استرپم ساختار خودشو دارم و من ازش اطلاعی ندارم. راستش متوجه اون موضوع شما نشدم! اگه data-aftersrc پاک بشه عکس افتر رو چجوری باید ازش استفاده کنم؟ دلیل دومم به خاطر استفاده از بوت استرپ این بود که تو داینامیک سازی برام راحت تر میشه در ضمن اون مشکل از بوت استرپ نیست، اون درست کار میکنه. مشکل از دستور های jquery هست که فکر میکنم به خاطر تلاقی ای دی هاست بی زحمت دستور های جیکوئری و کد اچ تی ام ال رو بررسی کنید، اگر خطایی هست بفرمایید اگر نه لطفا مرحله ای بفرمایید چطور اون کد های شما رو اجرا کنم بی نهایت ممنون از لطف و محبتتون نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 97 گزارش بازنشر ارسال شده در شهریور 97 در 54 دقیقه قبل، shayan گفته است : راستش متوجه اون موضوع شما نشدم! اگه data-aftersrc پاک بشه عکس افتر رو چجوری باید ازش استفاده کنم؟ دلیل دومم به خاطر استفاده از بوت استرپ این بود که تو داینامیک سازی برام راحت تر میشه در ضمن اون مشکل از بوت استرپ نیست، اون درست کار میکنه. مشکل از دستور های jquery هست که فکر میکنم به خاطر تلاقی ای دی هاست بی زحمت دستور های جیکوئری و کد اچ تی ام ال رو بررسی کنید، اگر خطایی هست بفرمایید اگر نه لطفا مرحله ای بفرمایید چطور اون کد های شما رو اجرا کنم بی نهایت ممنون از لطف و محبتتون شما اگه از بوت استرپ استفاده می کنید که به راحتی می تونید از اسلایدرش استفاده کنید . بفرمایید از بوت استرپ چند استفاده می کنید تا راهنماییتون کنیم . نقل قول لینک به ارسال
shayan 116 ارسال شده در شهریور 97 مالک گزارش بازنشر ارسال شده در شهریور 97 در ۱ ساعت قبل، Mirrajabi گفته است : شما اگه از بوت استرپ استفاده می کنید که به راحتی می تونید از اسلایدرش استفاده کنید . بفرمایید از بوت استرپ چند استفاده می کنید تا راهنماییتون کنیم . در ضمن اون مشکل از بوت استرپ نیست، اون درست کار میکنه. مشکل از دستور های jquery هست که فکر میکنم به خاطر تلاقی ای دی هاست سلام دوست عزیز همونطور که عرض کردم مشکل از دستور های جیکوئری هست مشکلی تو کدنویسی های فرانت و بوت استرپ نیست اون ها رو لطفا بررسی کنید نقل قول لینک به ارسال
mehran-b 2385 ارسال شده در شهریور 97 گزارش بازنشر ارسال شده در شهریور 97 سلام @shayan توجه کنید شما برای اسلایدری که توی شروع تاپیک گفتید که هیچ ربطی نداره به بوت استرپ یه HTML به شکل زیر میخواید. <div id="RimiyaFx"><img src="img/1.jpg"></div> و یه کد جاوا اسکریپت (جی کوئری) هم به شکل زیر میخواید. (function($) { $(function() { var images = ['1.jpg','2.jpg','3.jpg', '4.jpg'], index = 0, maxImages = images.length - 1; var timer = setInterval(function() { var currentImage = images[index]; index = (index == maxImages) ? 0 : ++index; $('#RimiyaFx img').fadeOut(200, function() { $('#RimiyaFx img').attr("src", 'img/'+currentImage); $('#RimiyaFx img').fadeIn(200); }); }, 2000); }); })(jQuery); نام عکس ها هم توی کد جاوا اسکریپت دقت کنید توی آرایه images هست که به همون ترتیب هر دو ثانیه با افکت fadeOut و fadeIn عوض میشه. این میشه یه اسلایدر ساده مستقل از بوت استرپ. موفق باشید 1 نقل قول لینک به ارسال
shayan 116 ارسال شده در شهریور 97 مالک گزارش بازنشر ارسال شده در شهریور 97 در 44 دقیقه قبل، mehran-be گفته است : سلام @shayan توجه کنید شما برای اسلایدری که توی شروع تاپیک گفتید که هیچ ربطی نداره به بوت استرپ یه HTML به شکل زیر میخواید. <div id="RimiyaFx"><img src="img/1.jpg"></div> و یه کد جاوا اسکریپت (جی کوئری) هم به شکل زیر میخواید. (function($) { $(function() { var images = ['1.jpg','2.jpg','3.jpg', '4.jpg'], index = 0, maxImages = images.length - 1; var timer = setInterval(function() { var currentImage = images[index]; index = (index == maxImages) ? 0 : ++index; $('#RimiyaFx img').fadeOut(200, function() { $('#RimiyaFx img').attr("src", 'img/'+currentImage); $('#RimiyaFx img').fadeIn(200); }); }, 2000); }); })(jQuery); نام عکس ها هم توی کد جاوا اسکریپت دقت کنید توی آرایه images هست که به همون ترتیب هر دو ثانیه با افکت fadeOut و fadeIn عوض میشه. این میشه یه اسلایدر ساده مستقل از بوت استرپ. موفق باشید دقیقا نکته ای که مطرح هست و شما متوجه عرض بنده نشدید همینه طبق دستور العمل کتابخونه جیکوئری ای که ازش استفاده میکنم باید حتما از این الگو استفاده بشه برای افتر بیفور کردن دو عکس <div class="g-before-after" id="RF"><img src="img/1.jpg" data-aftersrc="img/2.jpg"></div> هم لزوما باید src باشه و هم data-aftersrc که اولی میشه عکس بیفور و دومی میشه عکس افتر حالا میخوام این اسلاید هم زمان برای هر دو عکس اتفاق بیوفته که هم محتوای src تغیر کنه و هم data-aftersrc امیدوارم تونسته باشم منظورم رو برسونم نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .