وبسایت زیر را مشاهده کنید
https://templatemo.com/live/templatemo400polygon
وقتی روی عکس هاور میشه یک باتن نشون داده میشه که اگه روی اون کلیک کنیم عکس بزرگ نمایی میشه
برای این، چه ترفند یا کدی رو پیشنهاد میدین؟
@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/
موفق باشید
سلام.
یک 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>
@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/
موفق باشید
به اینجور نمایش عکس ها میگن جعبه نور Lightbox (Modal Image Gallery) که میتونید از کتابخانه های آماده براش استفاده کنید.
مثال از پیاده سازی: https://www.w3schools.com/howto/howto_js_lightbox.asp
این هم مفیده: https://www.w3schools.com/howto/howto_css_modal_images.asp
البته برای مقصود شما نیاز به تغییرات و ایجاد پویایی هستش.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟