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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط kamalwp
      سلام 
      دوستان خیلیا میگن که باید برای طراحی قالب وردپرس از نسخه 1.12.4 استفاده کنیم ، این درسته؟ البته من نگاه کردم هرچی سایت وردپرسیه از نسخه 1.12.4 استفاده کردن
      دلیل اینکار چی هست واینکه نمیشه از تسخه بالاتر استفاده کرد
    • توسط jistili1
      سلام دوستان.
      ببینید من یک فرم دارم که فقط دو input داره.یک اینپوت متن و یک اینپوت سابمیت.توی اینپوت متن ، کاربر کد imdb یک فیلم رو میده.بعد فرم من با ajax ارسال میشه.فرض بگیریم مقادیر برای صفحه check.php ارسال بشه.حالا من توی صفحه check.php همچین کدی رو دارم:
      <?php if(isset($_POST["btn"])) { echo file_get_contents("http://mydiba.club/".$_POST["link"]."/"); ?> <script src="jquery-3.4.1.js"></script> <script> $(document).ready(function(){ $(".-dl .Block_dl").each(function(){ var href=$(this).find(".dublboxa:first-of-type").attr("href"); $.ajax({ url:"check2.php", method:"POST", data:"link="+href }); }); }); </script> <?php } ?> اگه به کد دقت کنید ، وقتی کاربر کد imdb یک فیلم رو وارد کرد ، در صفحه check کل محتویات اون فیلم که در یکی از سایت های دانلود فیلم هست echo میشه.بعد در این قسمت یک ajax دیگه هم داریم که خودش توی یک صفحه check هست.کار این قطعه کد ajax که در جی کوئری نوشته شده اینه که تمامی لینک های دانلود اون فیلم رو از سایت دانلود فیلم بگیره و ببره به یک صفحه check دیگر که در اینجا اسمش check2.php هست.خودتون میتونید کد رو ببینید.حالا اینکه توی صفحه check2.php چی هست دیگه مهم نیست.خلاصشو بگم : من اینکارو کردم ولی همونطور که فکرشو میکردم انجام نشد.شما چه راه حلی برای این کار دارید؟در واقع الان با دو تا ajax تو در تو روبرو هستیم.
      یک قسمت از کد من اشکال داره یا در کل غیر استاندارد نوشتم؟اگه میشه یه راه حل بگید که اینکار رو بتونم انجام بدم.دقت کنید که اون قسمت از کد جی کوئری که از متد each استفاده کردم ، برای اینه که به ازای هر لینکی که در صفحه اون فیلم در سایت دانلود وجود دارد ، یک بار این ajax که خودش توی صفحه check یک ajax دیگست رو انجام بده.
      خیلییی خیلییی ممنون میشم اگه کمکم کنید.
      ضمنا از curl هم نمیخوام استفاده کنم
    • توسط SadraHkm
      سلام دوستان
      امیدوارم حالتون خوب باشه
      لطفا یه نگاهی به کد زیر بندازید
      <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <button id="calcBtn">Calculate</button> <div id="result"></div> <script> $(window).ready(function () { $('#calcBtn').click(function (e) { $('p').each(function () { $(this).css('color','rgb('+ rand(0,255) +','+ rand(0,255) +','+ rand(0,255) +')'); $('#result').append($(this).html()); // ----------------- This Code : //$('#result').append($(this)); }) }); }) </script> در اون قسمتی از کد که دارم محتوی کدهای پاراگراف رو به تگ div اضافه میکنم یه سوالی ذهن منو مشغول کرده.
      اگر همین کدی که الان هست رو اجرا کنیم، جی کوئری هربار توی حلقه رنگ تگ اصلی رو تغییر میده و یه کپی از اون پاراگراف میگیره و اضافه میکنه به div.
      ولی اگه اون تکه کدی که کامنت هست رو با اون خط جایگزین کنیم، میاد و هر بار کلا تگ پاراگراف رو برمیداره و اضافش میکنه به div. یعنی دیگه کپی ازش نمیگیره و دیگه تگ های p اون بالا باقی نمیموند.
      میخواستم ببینم آیا من درست فهمیدم ؟ یا مشکلی توی کد هست که اینجوری اجرا میشه ؟!
      باتشکر فراوان
       
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، علت پرش صفحه زمان hover شدن موس روی یک div در جی کوئری چیه؟
      $(".box #a-x").hover(function() { $('#x-img').stop().fadeIn('400'); }, function() { $('#x-img').stop().fadeOut('300'); }); $(".box #a-y").hover(function() { $('#y-img').stop().fadeIn('400'); }, function() { $('#y-img').stop().fadeOut('300'); }); البته بیش تر از این تعداده حدود 7 تگ هستش. لطفا راهنمایی کنید.
      با تشکر و سپاس
    • توسط 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