جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
علی سعادت
4 سال پیش توسط علی سعادت مطرح شد
5 پاسخ

بزرگ نمایی تصویر بعد از کلیک

وبسایت زیر را مشاهده کنید
https://templatemo.com/live/templatemo400polygon
وقتی روی عکس هاور میشه یک باتن نشون داده میشه که اگه روی اون کلیک کنیم عکس بزرگ نمایی میشه
برای این، چه ترفند یا کدی رو پیشنهاد میدین؟


ثبت پرسش جدید
سبحان دادخواه
تخصص : دانشجوی برنامه نویسی :)
@SobhanDadkhah 4 سال پیش مطرح شد
1

@ali.saadat.1386.aa سلام.
برای این مورد باید حداقل کمی دانش جاوا اسکریپت یا جی کوئری رو داشته باشید. با روشی که مهندس امیری گفتند با جاوا اسکریپت بصورت دستی میتونید کار بکنید . یکی دیگه از روش های ساده که البته تو صفحه دیگه ای عکس رو بزرگ میکنید این لینک هست :
https://www.w3schools.com/css/css_image_gallery.asp
حالا اگر با جزئیات بیشتر نیاز دارید باید به اطلاعتون برسونم اون موردی که توی سایت نمونه هست اصطلاحا Image Gallery هست و با یک سرچ ساده هزاران image gallery آماده میتونید پیدا بکنید . من چندین لینک میذارم که ایده کلی رو متوجه باشید و بعد با سلیقه خودتون جستجوی بیشتری انجام بدید.

https://mobirise.com/bootstrap-gallery/jqueryimagegallery.html
https://mobirise.com/bootstrap-gallery/cssimagegallery.html
https://mobirise.com/bootstrap-gallery/
موفق باشید


محمد امیری
تخصص : backend coder
@mohammadeng3731 4 سال پیش آپدیت شد
1

سلام.
یک div با position برابر با fixed ایجاد کنید و داخلش عکس رو قرار بدید و برای عکس thumbnail یه صفت (مثلا data-large-image) قرار بدید و وقتی رو عکس کوچیکتر کلیک میکنید اون مقدار که برابر با آدرس عکس بزرگتر هست بگیرید و بذارید داخل ادرس عکس بزرگتر:

//thumbnail image tag

<img id='thumbnailImag' src='your Addres' data-large-image-address='your large image address'>

//large image tag

<img src='' id='largeImage'>

<script>

let thumbnailImage=document.getElementById('thumbnailImage');
let largeImage=document.getElementById('larageImage');

thumbnailImage.addEventListener('click',function(){

let largeImageSrc=this.getAttribute('data-large-image-address');

largeImage.src=src;
})

</script>

علی سعادت
تخصص : junior front-end developer
@Saadat 4 سال پیش مطرح شد
0

میشه بیشتر توضیح بدید؟


سبحان دادخواه
تخصص : دانشجوی برنامه نویسی :)
@SobhanDadkhah 4 سال پیش مطرح شد
1

@ali.saadat.1386.aa سلام.
برای این مورد باید حداقل کمی دانش جاوا اسکریپت یا جی کوئری رو داشته باشید. با روشی که مهندس امیری گفتند با جاوا اسکریپت بصورت دستی میتونید کار بکنید . یکی دیگه از روش های ساده که البته تو صفحه دیگه ای عکس رو بزرگ میکنید این لینک هست :
https://www.w3schools.com/css/css_image_gallery.asp
حالا اگر با جزئیات بیشتر نیاز دارید باید به اطلاعتون برسونم اون موردی که توی سایت نمونه هست اصطلاحا Image Gallery هست و با یک سرچ ساده هزاران image gallery آماده میتونید پیدا بکنید . من چندین لینک میذارم که ایده کلی رو متوجه باشید و بعد با سلیقه خودتون جستجوی بیشتری انجام بدید.

https://mobirise.com/bootstrap-gallery/jqueryimagegallery.html
https://mobirise.com/bootstrap-gallery/cssimagegallery.html
https://mobirise.com/bootstrap-gallery/
موفق باشید


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

به اینجور نمایش عکس ها میگن جعبه نور Lightbox (Modal Image Gallery) که میتونید از کتابخانه های آماده براش استفاده کنید.

مثال از پیاده سازی: https://www.w3schools.com/howto/howto_js_lightbox.asp


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

این هم مفیده: https://www.w3schools.com/howto/howto_css_modal_images.asp
البته برای مقصود شما نیاز به تغییرات و ایجاد پویایی هستش.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام