Crocoblock / suggestions

The suggestions for CrocoBlock project
194 stars 78 forks source link

Some suggestions for improving the Gallery Slider widget - jet product gallery #7033

Open 79ho3ein opened 1 year ago

79ho3ein commented 1 year ago

Please consider these few things to improve this widget as they are very important.

1- padding for product tumbnails.

2- padding for images : https://prnt.sc/Gc3LORWNxpbt

3- Gap option to control the distance between the featured image and thumbnails : https://prnt.sc/WQkBwavCkxUR

4- Left and right position for thumbnails : https://prnt.sc/10fimlfbWzE0

For example, if we choose the left position, the result will be like this: https://prnt.sc/lEvMa5uKlos-

5- box shadow for Prev/Next Arrows (featured image and thumbnails)

6- inside and outside position for Prev/Next Arrows (Like Elementor's slider widget) This option is very useful and helps to keep the Prev/Next Arrows in the widget frame.

7- speed slide control for thumbnails

thank you

olyaastep commented 1 year ago

Add an ability to create gallery like on airbnb : https://www.airbnb.com/rooms/48821490?adults=1&category_tag=Tag%3A7769&children=0&enable_m3_private_room=true&infants=0&pets=0&photo_id=1150952775&search_mode=flex_destinations_search&check_in=2023-09-01&check_out=2023-09-08&source_impression_id=p3_1692639217_%2B1jmoy5KL9PKr4%2FL&previous_page_section_name=1000&federated_search_id=bded5b55-573b-4064-849a-b3e795a7c3ba

k4znIm commented 11 months ago

I agree. I use that widget a lot, but its kinda limited, what you can do.

I would also add:

There are some css i use for horizontal gallery to achieve some of these.

Custom ID is "gallery"

/* ==== Jet Slider Gallery ==== */

/* Change main image height and object-fit */
#gallery .jet-woo-product-gallery__image-link img{
    height: 450px;
    object-fit: contain;
}

/* Change thumbnails images height and object-fit */
#gallery .jet-woo-swiper-control-thumbs__item-image img{
    height: 120px;
    object-fit: contain;
}

/* Change thumbnails container padding (gap between main image and thumbnails) */
.jet-gallery-swiper-thumb{
    padding: 0px 10px 0px 10px !important;
}

/* Same settings just for phone */
@media only screen and (max-width: 767px) {
  #gallery .jet-woo-product-gallery__image-link img{
        height: 350px;
        object-fit: contain;
    }

    #gallery .jet-woo-swiper-control-thumbs__item-image img{
    height: 100px;
        object-fit: contain;
    }

    .jet-gallery-swiper-thumb{
        padding: 0px 10px 0px 10px !important;
    }
}
k4znIm commented 11 months ago

Add an ability to create gallery like on airbnb : https://www.airbnb.com/rooms/48821490?adults=1&category_tag=Tag%3A7769&children=0&enable_m3_private_room=true&infants=0&pets=0&photo_id=1150952775&search_mode=flex_destinations_search&check_in=2023-09-01&check_out=2023-09-08&source_impression_id=p3_1692639217_%2B1jmoy5KL9PKr4%2FL&previous_page_section_name=1000&federated_search_id=bded5b55-573b-4064-849a-b3e795a7c3ba

That's would be great, but rather, than make it possible in slider widget, that would be new widget completly.