رفتن به مطلب

درخواست یک دستور Jquery


پست های پیشنهاد شده

سلام و درود خدمت اساتید گرام

من یه چیزی تو ذهنم هست نمیدونم جواب میده یا خیر

    <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 که نوشتم

آیا امکانپذیر هست؟

ویرایش شده توسط shayan
لینک به ارسال
در 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

لینک به ارسال
در 37 دقیقه قبل، Mirrajabi گفته است :

سلام .

اینکه تغییر عکس ایجاد بشه هر چند ثانیه میشه . این آدرس تقریبا چیزیکه که مدنظرتونه .

https://stackoverflow.com/questions/35720652/jquery-how-to-change-image-after-time-with-fadein

ممنونم

من آشنایی با این کدها ندارم

میشه کامل توضیح بدید چطور اجرا کنم؟

لینک به ارسال
در 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);

 

لینک به ارسال
در 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);

 

لینک به ارسال

دوستان من در نهایت رسیدم به اسلایدر بوت استرپ و این کد 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,
	});
});

 از این کتابخونه هم استفاده کردم

اما نمیدونم چرا وقتی اسلایدر حرکت میکنه هیچی از اسلاید دوم نمایش داده نمیشه

یه خطای ریز باید داشته باشه به نظرم!!

لینک به ارسال

سلام @shayan

 

کدی که بنده ارسال کردم به تنهایی بدون هیچ کد اضافه ای (اون data-aftersrc هم پاک بشه) به احتمال 98 درصد کار میکنه.

اسلایدر بوت استرپم ساختار خودشو دارم و من ازش اطلاعی ندارم.

لینک به ارسال
در 2 ساعت قبل، mehran-be گفته است :

سلام @shayan

 

کدی که بنده ارسال کردم به تنهایی بدون هیچ کد اضافه ای (اون data-aftersrc هم پاک بشه) به احتمال 98 درصد کار میکنه.

اسلایدر بوت استرپم ساختار خودشو دارم و من ازش اطلاعی ندارم.

راستش متوجه اون موضوع شما نشدم!

اگه data-aftersrc پاک بشه عکس افتر رو چجوری باید ازش استفاده کنم؟

دلیل دومم به خاطر استفاده از بوت استرپ این بود که تو داینامیک سازی برام راحت تر میشه

در ضمن اون مشکل از بوت استرپ نیست، اون درست کار میکنه. مشکل از دستور های jquery هست که فکر میکنم به خاطر تلاقی ای دی هاست

بی زحمت دستور های جیکوئری و کد اچ تی ام ال رو بررسی کنید، اگر خطایی هست بفرمایید

اگر نه لطفا مرحله ای بفرمایید چطور اون کد های شما رو اجرا کنم

بی نهایت ممنون از لطف و محبتتون

لینک به ارسال
در 54 دقیقه قبل، shayan گفته است :

راستش متوجه اون موضوع شما نشدم!

اگه data-aftersrc پاک بشه عکس افتر رو چجوری باید ازش استفاده کنم؟

دلیل دومم به خاطر استفاده از بوت استرپ این بود که تو داینامیک سازی برام راحت تر میشه

در ضمن اون مشکل از بوت استرپ نیست، اون درست کار میکنه. مشکل از دستور های jquery هست که فکر میکنم به خاطر تلاقی ای دی هاست

بی زحمت دستور های جیکوئری و کد اچ تی ام ال رو بررسی کنید، اگر خطایی هست بفرمایید

اگر نه لطفا مرحله ای بفرمایید چطور اون کد های شما رو اجرا کنم

بی نهایت ممنون از لطف و محبتتون

شما اگه از بوت استرپ استفاده می کنید که به راحتی می تونید از اسلایدرش  استفاده کنید . بفرمایید از بوت استرپ چند استفاده می کنید تا راهنماییتون کنیم .

لینک به ارسال
در ۱ ساعت قبل، Mirrajabi گفته است :

شما اگه از بوت استرپ استفاده می کنید که به راحتی می تونید از اسلایدرش  استفاده کنید . بفرمایید از بوت استرپ چند استفاده می کنید تا راهنماییتون کنیم .

در ضمن اون مشکل از بوت استرپ نیست، اون درست کار میکنه. مشکل از دستور های jquery هست که فکر میکنم به خاطر تلاقی ای دی هاست


سلام دوست عزیز

همونطور که عرض کردم مشکل از دستور های جیکوئری هست

مشکلی تو کدنویسی های فرانت و بوت استرپ نیست

اون ها رو لطفا بررسی کنید

لینک به ارسال

سلام @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 عوض میشه.

این میشه یه اسلایدر ساده مستقل از بوت استرپ.

 

موفق باشید

لینک به ارسال
در 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

امیدوارم تونسته باشم منظورم رو برسونم

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...