jquerry and webpack

قد قمت باختبار ملفات المشروع ولا يبدوا أن هنالك مشكلة سوى أن هاته الحزمة تعتمد على جيكويري كحزمة تبعية، واستعمال هاته الأخيرة في تطبيق رياكت لا يعد خيارا جيدا ولا عمليا أصلا. 

جرب استعمال واحدة من الحزم الخاصة برياكت على وجه الخصوص، وبدل الاعتماد على الحزمة التبعية وعلى جيكويري سيمكنك الاعتماد على رياكت وحده. أجد حزمة مثل react-image-magnify عملية وسلسلة من حيث الاستعمال وأكثر مرونة. جرب الإعتماد عليها في تطبيق فكرتك بدل حزمة magnify التي تتطلب حزمة jQuery.

بتاريخ 24 دقائق مضت قال Adnane Kadri:

قد قمت باختبار ملفات المشروع ولا يبدوا أن هنالك مشكلة سوى أن هاته الحزمة تعتمد على جيكويري كحزمة تبعية، واستعمال هاته الأخيرة في تطبيق رياكت لا يعد خيارا جيدا ولا عمليا أصلا. 

جرب استعمال واحدة من الحزم الخاصة برياكت على وجه الخصوص، وبدل الاعتماد على الحزمة التبعية وعلى جيكويري سيمكنك الاعتماد على رياكت وحده. أجد حزمة مثل react-image-magnify عملية وسلسلة من حيث الاستعمال وأكثر مرونة. جرب الإعتماد عليها في تطبيق فكرتك بدل حزمة magnify التي تتطلب حزمة jQuery.

حاولت دالك الا اني فقدت الطريق نحو ما اوده 
فعندما اعمل ب 

react-image-magnify

لا استطيع ان اجعل الفقاعة تكون هي الصورة اللتي ستعمل zoom 

هناك animation على الفقاعة الا اني اريد اضافة react-image-magnify  حتى تظهر لي صورتي ب zoom فهمت 

عند مشاهدة youtube or documntation  اجدهم داءما يعملون ب خاصية "src:..img"

وانا لدي bg transparant in bubblee class اي اني لا احتاج الصورة .

لا اعلم كيف اشرح جيدا و لا كيف ابحت جيدا :')

بتاريخ الآن قال Mohamed Boumlik:

حاولت دالك الا اني فقدت الطريق نحو ما اوده 
فعندما اعمل ب 

react-image-magnify

لا استطيع ان اجعل الفقاعة تكون هي الصورة اللتي ستعمل zoom 

هناك animation على الفقاعة الا اني اريد اضافة react-image-magnify  حتى تظهر لي صورتي ب zoom فهمت 

عند مشاهدة youtube or documntation  اجدهم داءما يعملون ب خاصية "src:..img"

وانا لدي bg transparant in bubblee class اي اني لا احتاج الصورة .

لا اعلم كيف اشرح جيدا و لا كيف ابحت جيدا :')

 

هل تقصد أنك تريد تطبيق زوم على جزء معين من الصورة بحيث يكون بشكل دائري ؟

بتاريخ الآن قال Adnane Kadri:

هل تقصد أنك تريد تطبيق زوم على جزء معين من الصورة بحيث يكون بشكل دائري ؟

كما ترى الفقاعتين تتحركان ب animation with css
and bg:transparant

ادن بالنسبة للفقاعة فهي تظهر ما في الصورة 

الا اني اريدها ان تظهره ب zoom اتناء animation 

بتاريخ 11 ساعة قال Mohamed Boumlik:

 

كما ترى الفقاعتين تتحركان ب animation with css
and bg:transparant

ادن بالنسبة للفقاعة فهي تظهر ما في الصورة 

الا اني اريدها ان تظهره ب zoom اتناء animation 

لا أعلم ان كنت قد فهمت مقصودك على نحو دقيق، ولكن لا أظن أنك تحتاج الاستعانة بحزمة خارجية لتطبيق مثل هكذا تأثير. فسيمكنك الاعتماد على CSS بشكل كلي للقيام بذلك ببعض التحايل.

يمكنك المحايلة باستخدام خاصية clip-path الي تساعدك في تقطيع الخلفية. واليك منطق العملية كاملة:

1. قم بإنشاء حاوية تمتلك الوضعية relative
2. قم بإنشاء عنصري img لنفس الصورة داخل هاته الحاوية
3. واحدة من هاته الصورتين يجب أن تمتلك الوضعية المطلقة position absolute لتوضع فوق الصورة الأولى مباشرة. 

الآن ستمتلك صورتين متطابقتين فوق بعضهما البعض. ولذلك ستسهل المهمة الآن، اقتطاع جزء دائري من الصورة الثانية واعادة تحجيمها عن طريق عمل زوم او scale الى ضعف حجمها او حجمها مرة ونصف سيعطي نفس التأثير تماما. 

مثال:

فيما يلي الشيفرة المسؤولة:

<div class="image-container">
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Example Image">
  
  <img class="clipped-image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Example Image">
</div>

***

.clipped-image {
  display: block;
  position: absolute;
  top: 0;
  left: 10;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* جعل الصورة بشكل دائري */
  clip-path: circle(50px at 32rem 16rem); /* تحديد منطقة المكبّر */
  transform: scale(1.5);
}

يذكر أن الخاصية circle تقبل معاملين:

• المعامل الأول هو قطر الدائرة المراد اقتطاعها.
• المعامل الثاني بعد at هو وضعية الدائرة واحداثياتها.

يمكنك التوسع في الفكرة أكثر، عن طريق تنسيق حدود الصورة الثانية لتظهر بشكل أزرق مثل الفقاعات التي لديك. او عن طريق تطبيق حركية animation تتحكم في وضعية الدائرة واحداثياتها. أو عن طريق اضافة صور اخرى بتحويلات scale مختلفة لتظهر مثل الفقاعات.

سأترك ذلك لك لتجتهد في التوسع في الفكرة.

بتاريخ 2 دقائق مضت قال Adnane Kadri:

لا أعلم ان كنت قد فهمت مقصودك على نحو دقيق، ولكن لا أظن أنك تحتاج الاستعانة بحزمة خارجية لتطبيق مثل هكذا تأثير. فسيمكنك الاعتماد على CSS بشكل كلي للقيام بذلك ببعض التحايل.

يمكنك المحايلة باستخدام خاصية clip-path الي تساعدك في تقطيع الخلفية. واليك منطق العملية كاملة:

1. قم بإنشاء حاوية تمتلك الوضعية relative
2. قم بإنشاء عنصري img لنفس الصورة داخل هاته الحاوية
3. واحدة من هاته الصورتين يجب أن تمتلك الوضعية المطلقة position absolute لتوضع فوق الصورة الأولى مباشرة. 

الآن ستمتلك صورتين متطابقتين فوق بعضهما البعض. ولذلك ستسهل المهمة الآن، اقتطاع جزء دائري من الصورة الثانية واعادة تحجيمها عن طريق عمل زوم او scale الى ضعف حجمها او حجمها مرة ونصف سيعطي نفس التأثير تماما. 

مثال:

فيما يلي الشيفرة المسؤولة:

<div class="image-container">
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Example Image">
  
  <img class="clipped-image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Example Image">
</div>

***

.clipped-image {
  display: block;
  position: absolute;
  top: 0;
  left: 10;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* جعل الصورة بشكل دائري */
  clip-path: circle(50px at 32rem 16rem); /* تحديد منطقة المكبّر */
  transform: scale(1.5);
}

يذكر أن الخاصية circle تقبل معاملين:

• المعامل الأول هو قطر الدائرة المراد اقتطاعها.
• المعامل الثاني بعد at هو وضعية الدائرة واحداثياتها.

يمكنك التوسع في الفكرة أكثر، عن طريق تنسيق حدود الصورة الثانية لتظهر بشكل أزرق مثل الفقاعات التي لديك. او عن طريق تطبيق حركية animation تتحكم في وضعية الدائرة واحداثياتها. أو عن طريق اضافة صور اخرى بتحويلات scale مختلفة لتظهر مثل الفقاعات.

سأترك ذلك لك لتجتهد في التوسع في الفكرة.

هو ما قمت به جيد لاكن الفقاعة في كور animation