Forums

Portfolio Slideshow
remove fadeIn(); (22 posts)

  1. bluebeard
    Member
    Posted 1 year ago #

    hi dalton,
    i have to say this plugin is sheer genius and it's saved us hours of manual hell!

    i just have a question.. you see, before the first image loads (fades in), nothing happens, which misleads users into thinking nothing is going to appear.. until the image fades in.

    is there a way to remove the fadeIn(); so that users can see the image loading, or at least a way to define a border around the area so that the user can expect that something is going to load in that space?

    of course the ideal solution would be to add a preloader but a faster solution could be to remove fadeIn(); or add a border.. which i have no idea how to do.. any ideas?

    thanks in advance!

  2. Mickael
    Member
    Posted 1 year ago #

    I have about the same problem and i just posted :), if there is no solution, what would i need to do to install a preloader ?

  3. Dalton Rooney
    Member
    Posted 1 year ago #

    The fade-in is there because occasionally some weird stuff happens if the slideshow is displayed before the page is fully loaded - mostly related to detecting the size of the container and placing everything correctly. I delayed the load of the slideshow until the files are downloaded, so that everything can be sized correctly. Of course this can cause a delay if you've got a lot of image files to download or a slow connection.

    My preference would be to show the slideshow as soon as the first image is completely downloaded, but I haven't figured out how to do that. I think I may be able to attach a class to the first image and detect when it is available, but I'm not sure. It's going to take a little while to figure out.

    In the meantime, what do you think about a small animated "loading" graphic that can be replaced by the slideshow once it is ready?

    Dalton

  4. Mickael
    Member
    Posted 1 year ago #

    In the meantime, what do you think about a small animated "loading" graphic that can be replaced by the slideshow once it is ready?

    Thats exacly what im looking for :D, of course the first option would rock even more but whenever you get the time to do that :D

    and by the way sorry for intruding your post bluebeard, i have the exact same issue.

  5. bluebeard
    Member
    Posted 1 year ago #

    no problem Mickael and thanks for the solution, Dalton! that would be perfect actually. how do we go about doing that? i've tried to delve into the CSS and PHP but haven't found a way to insert a loading gif or a border. really appreciate your help so much and thanks for replying so fast! this plugin is a lifesaver.

  6. bluebeard
    Member
    Posted 1 year ago #

    hi again Dalton, so i tried messing with the css to define a border around the image container but it doesn't work either. is that because everything only loads once the first image is loaded? i was just thinking.. a quick way to solve it would be to wrap a div around the container and then specify a border.. but couldn't get it to work either! any quick and simple ideas for a fix?

  7. Dalton Rooney
    Member
    Posted 1 year ago #

    Hi Bluebeard -
    I don't have the time to do a proper release, but here's a version of the plugin with a loader.gif: http://daltn.com/x/ps052b

    I just threw in a div before the actual slideshow with the loader as a background, then once the window is fully loaded, that div is hidden and the slideshow is shown. Neat, eh?

    Cheers,
    Dalton

  8. bluebeard
    Member
    Posted 1 year ago #

    hi dalton,

    wow thanks for your precious time! so i deleted the old plugin and replaced it.. somehow it doesn't seem to be working. same thing happens. i can't figure out what might be wrong.. couldn't be a jquery conflict since the old one worked..? hmm...

  9. Dalton Rooney
    Member
    Posted 1 year ago #

    Is the plugin not working at all, or just the new loader that isn't working? Which version of the plugin were you using previously?

    It seems like the loader was disappearing too quickly on my previous version, here's a link with a new delayed loader: http://daltonrooney.com/portfolio-dev/archives/328

    The same download link will get the new version for you.

    Dalton

  10. Mickael
    Member
    Posted 1 year ago #

    Thanks a lot dalton, works perfectly for me.
    Only thin was the size and the animation, but i changed some css and downloaded a new animation at http://ajaxload.info/ :D

  11. Dalton Rooney
    Member
    Posted 1 year ago #

    Yeah, it's hard to predict what the size of the slideshow is going to be until the page is loads, so I figured you would want to customize it - which is nice and easy. Cheers.

  12. bluebeard
    Member
    Posted 1 year ago #

    Hello again Dalton,

    Wow, thanks for upgrading the plugin! It's surely working fine on your site.

    In the previous first version (with preloader) the slideshow was working fine as usual just that there was still no preloader.

    So i installed this latest update and i notice that in the settings page there's an option for "loading animation". All was working fine as usual (without any preloader) till i ticked that option, and the slideshow just didn't appear anymore. I'm just thinking could it be some kind of ajax or jquery kind of conflict. I'm using quite a number of .js files and javascripts in my header.php.

    Here they are:

    -----------------------------

    1. jquery.js
    2. smoothscroll.js
    
    <script type="text/javascript">
    jQuery(document).ready(function($){
    	$("img.a").hover(
    		function() { $(this).animate({"opacity": "0"}, "fast"); },
    		function() { $(this).animate({"opacity": "1"}, "fast"); }
    	);
    });
    </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    
    	//slides the element with class "menu_body" when mouse is over the paragraph
    	$("#firstpane p.menu_head").mouseover(function()
        {
    	     $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
             $(this).siblings().css({backgroundImage:"url(left.png)"});
    	});
    });
    </script>
    <script type="text/javascript">
    
    $(document).ready(function(){
    
    	$('#bgg').fadeIn(800);
    
    });
    
    </script>

    -----------------------------

    Being the java noob i am, i've no idea which part of it has messing up the functionality of the portfolio slideshow plugin.

    Anyhow, thank you once again for your precious time to develop this amazing plugin! Hope we can find the light thru the tunnel..

    Peace,
    Lee

  13. Dalton Rooney
    Member
    Posted 1 year ago #

    Hey Lee,
    Can you post a link? I'll take a look later today. And also, make sure you clear the cache on your site, if you have one, and on your browser, too.

  14. bluebeard
    Member
    Posted 1 year ago #

    I'd be glad to!
    If you could give me your email address i'll drop u a mail with the link and login. thank you so much!

  15. Dalton Rooney
    Member
    Posted 1 year ago #

  16. Dalton Rooney
    Member
    Posted 1 year ago #

    Looks like bluebeard found a bug in the plugin that causes the slideshow to fail if the preloader is selected and the nav is at the bottom. I'm working on a fix and will release it to the repository asap.

    Dalton

  17. Dalton Rooney
    Member
    Posted 1 year ago #

    The new version has been uploaded to the repository, should be available soon. Please let me know if 0.5.7 fixes the problem for you!

    Dalton

  18. kdesign
    Member
    Posted 1 year ago #

    Hi Dalton,

    Thanks for the great plugin first of all! I was looking for a slideshow that allowed a fade in at the beginning, which led me to this post. I read bluebeard's first post and coincidentally that's actually what i need. My clients wanted their intro image to fade in but unfortunately there wasn't a simple enough js code that wouldn't conflict with other plugins in their site. That, plus easy maintenance, caused me to try out your plugin, but unfortunately the fade in described by Bluebeard no longer happens. Is there no way to gain that effect in the newest version? (0.6.0). From what I read it seems that it's something that needed to be fixed, but it would actually do what I'd like! Any info on this would be much appreciated. Thanks!

    KD

  19. Dalton Rooney
    Member
    Posted 1 year ago #

    Hi KD,
    If you enable the "Show loading animation" setting and delete the actual loading animation GIF file (or if you're feeling proper you could just change the CSS to not use the background image), then you should get the same effect.

    Dalton

  20. kdesign
    Member
    Posted 1 year ago #

    Hi Dalton,

    Thanks for your response. I tried enabling the loading animation then deleting the gif file from the lib/images folder however the fading still does not occur. Rather, the image just pops up. Am I missing something you think? If it helps, other settings are: Autoplay Timeout is set to 0, Transition Speed is 400, nav=false. Those are about the only settings I've changed. I'm also on WP 3.0.4 (fresh install). The same thing happens on both Firefox and Safari on a mac. I appreciate your time on this!

    KD

  21. Dalton Rooney
    Member
    Posted 1 year ago #

    Ah, my mistake, I was thinking about an earlier version of the code. You actually want to change line 84:

    echo '$(\'div.slideshow-wrapper\').css(\'visibility\',\'visible\');';

    to this

    echo '$(\'div.slideshow-wrapper\').fadeIn();';

    Dalton

  22. kdesign
    Member
    Posted 1 year ago #

    Hi Dalton,

    Do you mean to disregard the previous solution as well? I replaced that line in portfolio-slideshow.php but it caused the image to not show up at all. Sorry for the trouble on this.

    KD

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic