+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: How to create blur effect on gallery pictures?

  1. #1
    Master
    Join Date
    Apr 2021
    Location
    USA
    Posts
    248

    How to create blur effect on gallery pictures?

    Hello guys,

    Does anyone know how to create a blur effect on both sides for vertical image similar to the one on gumtree?
    Reference: https://www.gumtree.com.au/s-ad/moor...as-/1196453197

    Screen Shot 2021-08-13 at 2.45.28 PM.png

  2. #2
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    3,138
    Hello,

    You need to use the same image as a background for the parent container and apply blur effect (filter: blur(15px)) playing with the css styles

    you can create a ticket and we'll do it as a small customization

  3. #3
    Master
    Join Date
    Apr 2021
    Location
    USA
    Posts
    248
    Quote Originally Posted by Rudi View Post
    Hello,

    You need to use the same image as a background for the parent container and apply blur effect (filter: blur(15px)) playing with the css styles

    you can create a ticket and we'll do it as a small customization
    Thanks for the guiding Rudi,

    Would you mind sharing it here so people can apply it to. Of course if it's simple enough and would not take too much of your time. I'm kinda understand your point. I could look into it, too. But I'm a amateur.

  4. #4
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    3,138
    Ok,

    1. go to templates > your_template > css > style.css > div.gallery div.preview > img

    remove:
    Code:
    Only registered members can view the code.
    and add below this code:
    Code:
    Only registered members can view the code.

    2. then go to tpl > controllers > listing_details.tpl

    below the line:
    Code:
    Only registered members can view the code.
    add:
    Code:
    Only registered members can view the code.

    3. Also in js > lib.js > find this.loadImage = function(obj){

    below the line:
    Code:
    Only registered members can view the code.
    add:
    Code:
    Only registered members can view the code.
    Last edited by Rudi; August 16, 2021 at 08:34 AM.

  5. #5
    Master
    Join Date
    Apr 2021
    Location
    USA
    Posts
    248
    Thanks Rudi,

    The code works great. But the blur image only show the 1st picture. Upon clicking on the second picture and forward, the background blur image is the same. Is there anyway we can make blur image change accordingly when clicking on different image?

    First image, first blur
    Screen Shot 2021-08-16 at 1.48.19 PM.png

    Second image, still first blur
    Screen Shot 2021-08-16 at 1.48.29 PM.png

    Third image, still first blur:
    Screen Shot 2021-08-16 at 1.48.36 PM.png

  6. #6
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    3,138
    I've edited my post

  7. #7
    Master
    Join Date
    Apr 2021
    Location
    USA
    Posts
    248
    Quote Originally Posted by Rudi View Post
    I've edited my post
    Love your fantastic support as always. Thank you so much, I really appreciate it.

  8. #8
    Senior Member
    Join Date
    Sep 2019
    Location
    Australia mate.
    Posts
    164
    This is a great feature that should probably be considered to be added to the default install Rudi.

  9. #9
    Master
    Join Date
    Apr 2021
    Location
    USA
    Posts
    248
    Hi Rudi,

    I noticed that on firefox and chrome, the blur effect from image bleed out of the content box, and show a shadow effect on top and bottom. Please see screenshot.

    Screen Shot 2021-08-17 at 3.12.17 PM.png

    On safari, adding overflow: hidden would fix it.

    Screen Shot 2021-08-17 at 3.12.42 PM.png

    But it's not working on Firefox and Chrome. Do you have a solution for this?

  10. #10
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    3,138
    Ok, add this style:

    Code:
    Only registered members can view the code.

+ Reply to Thread