shayan

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

12 پست در این موضوع قرار دارد

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

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

    <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
0

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


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

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


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

سلام .

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

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

ممنونم

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

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

0

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


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

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


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

 

0

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


لینک به پست

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

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

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

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

0

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


لینک به پست

سلام @shayan

 

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

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

1

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


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

سلام @shayan

 

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

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

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

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

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

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

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

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

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

0

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


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

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

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

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

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

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

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

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

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

0

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


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

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

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


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

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

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

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

0

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


لینک به پست

سلام @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

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


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

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

0

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط amirmt
      سلام و عرض ادب هنگامی که سایتم و میخوام باز کنم و ادرسش رو سرچ میکنم یه صفحه سفید باز میشه که این اخطار رو میده 
      Parse error: syntax error, unexpected 'text' (T_STRING) in /home/unickir/public_html/wp-includes/class-oembed.php on line 461
      کسی میدونه مشکل کجاست و کمک کنه
      ادرس سایت}: www.unick.ir
    • توسط amirmt
      سلام سایت من چند وقتیه مورده حمله قرار گرفته و وقتی میخوام وارد سایت بشم به سایت های خارجی لینک میشه. اینترنت و زیر رو کردم یه سایت گیرم اوردم به ادرس sucuri.net سایتم رو دادم چک کنه و یه لیست از فایل هایی که مشکل داره رو گفت گه یه اسکرین ازش پیوند کردم. اکثره فایل ها هم jquery هستش که به مشکل خورده کسی میتونه کمکم کنه تا این کد ها ترمیم بشه یا حداقل راهنماییم کنه؟؟
      ادرس وب سایته خودم: unick.ir

    • توسط unid_user
      سلام و درود
      دوستان گرامی من با تابع addclass در جی کوئری به مشکل خوردم. می خوام کلاس buy-butt رو به یک تگ a خاص اضافه کنم اما جواب نمیده!؟
      $( ".package-info .textwidget p a" ).addClass( "buy-butt" );  
    • توسط mamadja
      سلام خدمت مهندسین گرامی
      بنده یه پوسته HTML دارم که قصد دارم پله به پله خودم اون رو تبدیل به یک پوسته وردپرسی کنم . این پوسته ای رو که دانلود کردم به قسمت فراخوانی اسکریپت ها رسیدم طبق آموزش هایی که دیدم و کارایی که انجام دادم درست اسکریپت های مورد نظر فراخوانی نمیشن ، یعنی مطابق فایل Html که دانلود کردم نیستند . حتی فایل function.php رو هم درست کردم و تغییرات لازم را انجام دادم اما متاسفانه نتونستم ... 
      فایل ها رو آپلود میکنم تا اونجایی که پیش رفتم . هم فایل اصلی HTML هم پوشه Theme که دارم وردپرسش میکنم اگر کسی میتونه کمکم کنه و اسکریپت ها رو فراخوانی کنه ممنون میشم .
      *بنده در نظر دارم این پوسته رو تبدیل به یک پوسته وردپرسی فروش گیفت کارت تبدیل کنم و در نهایت با استفاده از ووکامرس یک فروشگاه تبدیل بشه .. اگه اساتید نظری در این رابطه دارن که این پوسته اصلا به درد همچین کاری میخوره یا نه راهنمایی کنه ممنون میشم .. ( قرار نیست آنلاین شه و بالا بیاد جهت آموزش خودم هدف گذاری کردم )
      سپاس
      Gifti.rar
      gift-wp.rar
    • توسط Monica
      باسلام ، ی select option دارم
      من میخوام با jQuery ترجیحا ajax بتونم طبق انتخاب کاربر بخش مربوطه رو نمایش بدم
      کدهای منو ببینید 
      // صفحه اصلی index.php <script> jQuery(document).ready(function($) { jQuery('#select123').change(function() { jQuery('.content123').hide(); jQuery('#' + jQuery(this).val()).show(); }).trigger("change"); }); </script> <select id="select123">  <option value="content1" selected>content1</option> <option value="content2">content2</option> <option value="content3">content3</option> <option value="content4">content4</option> </select> * توجه: میخوام وقتی صفحه بالا ران میشه text defult show بطور پیش فرض نمایش داده بشه
      صفحه my-page.php
      //my-page.php <div id="content1" class="content123"> text defult show </div> <div id="content2" class="content123"> contentttttttt </div> <div id="content3" class="content123"> content3 </div> <div id="content4" class="content123"> content4 </div>