Ajax Image Loading

13 posts from 4 voices

• Started 1 year ago by addamtron
• Latest reply from Kriesi
• This topic is closed
• This topic is resolved

Tags:

• ajax
• preloader

1. 

   addamtron
   Member

   Hello,

   Is there a way to add the same ajax loader used for the slideshow to individual images on the site?

   I have a page with one image after another and I want them all to use the preloader.

   Posted 1 year ago #
2. 

   addamtron
   Member

   HELLLOOO??

   Posted 1 year ago #
3. 

   Dude
   Dude

   Hi,
   Yes this should be possible. In js/avia.js replace:
   

   if(jQuery.fn.aviaImagePreloader)
   	jQuery('.partner_list').aviaImagePreloader({fadeInSpeed: 400, css_before_show:{visibility:'visible',opacity:0}, css_show:{opacity:1}});

   with:
   

   if(jQuery.fn.aviaImagePreloader)
   	jQuery('.partner_list, .entry-content').aviaImagePreloader({fadeInSpeed: 400, css_before_show:{visibility:'visible',opacity:0}, css_show:{opacity:1}});

   Posted 1 year ago #
4. 

   addamtron
   Member

   doesn't work. what i is doing is forcing a double preload on the portfolio images on the homepage though. The images on the detail view are added to the post content individually, like you'd do when you create a blog post.

   Posted 1 year ago #
5. 

   addamtron
   Member

   Please help.

   Posted 1 year ago #
6. 

   addamtron
   Member

   anyone? i just want to manually add the preloader to individual images on a portfolio item post.

   Posted 1 year ago #
7. 

   Devin
   Moderator

   Hi addamtron,

   Sorry for missing your response posts! Its gotten a bit busy around here. I've asked Dude to re-look at the solution he provided to see what might have happened.

   Can you also provide a link to your site and the page you are trying to get the pre-loader to work on?

   Thanks,

   Devin

   Posted 1 year ago #
8. 

   Dude
   Dude

   Hi!

   I adjusted the code above a bit. Probably the .content class was too general and affected all images.

   Best regards,
   Peter

   Posted 1 year ago #
9. 

   addamtron
   Member

   so what is the code and where do i put it. if i have to add a line to each image embed to get it to work, i will do that.

   Posted 12 months ago #
10. 

    Devin
    Moderator

    Hi addamtron,

    As Peter posted above:

    In js/avia.js replace:
    

    if(jQuery.fn.aviaImagePreloader)
    	jQuery('.partner_list').aviaImagePreloader({fadeInSpeed: 400, css_before_show:{visibility:'visible',opacity:0}, css_show:{opacity:1}});

    with:
    

    if(jQuery.fn.aviaImagePreloader)
    	jQuery('.partner_list, .entry-content').aviaImagePreloader({fadeInSpeed: 400, css_before_show:{visibility:'visible',opacity:0}, css_show:{opacity:1}});

    The file is in your theme files in the "js" folder. You'll either need to edit it live on your server or download it via ftp, make the changes then re-upload the file to the same place in the theme files and overwrite the old one.

    Regards,

    Devin

    Posted 11 months ago #
11. 

    addamtron
    Member

    all that does is refresh the image after the browser has downloaded it and it's cached. i want the pre-loader pinwheel to show up as the image is downloading.

    Posted 11 months ago #
12. 

    Dude
    Dude

    Hi!

    I marked this topic for Kriesi. I'm not sure why the code above doesn't work correct.

    Best regards,
    Peter

    Posted 11 months ago #
13. 

    Kriesi
    Key Master

    you also ned this css rule:

    .entry-content img{visibility:hidden}
    

    this will hide the images on page load and the preloader will then set the visibility to visible and slowly fade it in ;)

    Posted 11 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.