HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


IMAGE_FADER Block Creating Unique but Unintended Effect

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#67885 (In Topic #14452)
Avatar

Community saint

I have been playing around with the IMAGE_FADER block and I notice it has a curious action.

Image displayed then on to the next but while it does the change the last image is flashed in the logo corner of the page and slowly fades out. Interesting effect if not distracting but I'm thinking that is not the effect you were trying to achieve.  I've tried it out on both my sites and on either site it acts the same.

Check it out for yourself here at http://prehistoricsillustrated.com/index.php?page=imagefader


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#67890
Avatar

Community saint

Weird. I've been using the image fader block for awhile now on my site (in my signature) and it doesn't have that effect. But on your site, yes, it's a bit of a distraction.  :lol:

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
Posted
Rating:
#67894
Avatar

Community saint

Hi friendly,

Looks like the styles are not being inherited properly when a new image is inserted dynamically.

Code

{+START,BOX,,,{$?,{$GET,in_panel},panel,classic}}
   <a href="{GALLERY_URL*}"><img id="image_fader_f_{RAND%}" src="{$IMG;,blank}"><img id="image_fader_{RAND%}" src="{FIRST_URL*}" alt="" /></a>

   <script type="text/javascript">// <![CDATA[
   addEventListenerAbstract(window,'load',function () {
      var fp_animation=document.getElementById('image_fader_{RAND%}');
      var fp_animation_fader=document.getElementById('image_fader_f_{RAND%}');
      fp_animation_fader.style.position='absolute';
      fp_animation_fader.src='{$IMG;,blank}';

      {+START,LOOP,IMAGES}
         var url{_loop_key%}='{_loop_var;}';
         new Image().src=url{_loop_key%}; // precache
         window.setTimeout(function()
         {
            var func{_loop_key%}=function()
            {
               fp_animation_fader.src=fp_animation.src;
               setOpacity(fp_animation_fader,1.0);
               nereidFade(fp_animation_fader,0,50,-3);
               fp_animation.src=url{_loop_key%};
            };
            if ({_loop_key%}!=0) func{_loop_key%}();
            window.setInterval(func{_loop_key%},{MILL%}*{IMAGES});
         },{_loop_key%}*{MILL%});
      {+END}
   } );
   //]]></script>
{+END}

You can try replacing the code in BLOCK_MAIN_IMAGE_FADER.tpl with the following (it works for me):

The original code is here for comparison/reversion:

Code

{+START,BOX,,,{$?,{$GET,in_panel},panel,classic}}
   <a href="{GALLERY_URL*}"><img id="image_fader_{RAND%}" src="{FIRST_URL*}" alt="" /></a>

   <script type="text/javascript">// <![CDATA[
   addEventListenerAbstract(window,'load',function () {
      var fp_animation=document.getElementById('image_fader_{RAND%}');
      var fp_animation_fader=document.createElement('img');
      fp_animation.parentNode.insertBefore(fp_animation_fader,fp_animation.nextSibling);
      fp_animation_fader.style.position='absolute';
      fp_animation_fader.src='{$IMG;,blank}';

      {+START,LOOP,IMAGES}
         var url{_loop_key%}='{_loop_var;}';
         new Image().src=url{_loop_key%}; // precache
         window.setTimeout(function()
         {
            var func{_loop_key%}=function()
            {
               fp_animation_fader.style.left='0px';
               fp_animation_fader.style.top='0px';
               fp_animation_fader.src=fp_animation.src;
               setOpacity(fp_animation_fader,1.0);
               nereidFade(fp_animation_fader,0,50,-3);
               fp_animation.src=url{_loop_key%};
            };
            if ({_loop_key%}!=0) func{_loop_key%}();
            window.setInterval(func{_loop_key%},{MILL%}*{IMAGES});
         },{_loop_key%}*{MILL%});
      {+END}
   } );
   //]]></script>
{+END}

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#67901
Avatar

Re temp1024…

Thanks for the fix there :). Looks like you did two things:
  1. Have img tag created via markup rather than DHTML
  2. Remove left/top setting to 0

Took me a little time to work out what you were doing, so must have taken a bit of time to make the fix. Thanks  :thumbs:.

I think the default block only worked when inside something with "position: relative", whoops.

This is based on your fix, it is the same except I left the XHTML alone for accessibility and just removed '.nextSibling' to get the position right.

Code

{+START,BOX,,,{$?,{$GET,in_panel},panel,classic}}
   <a href="{GALLERY_URL*}"><img id="image_fader_{RAND%}" src="{FIRST_URL*}" alt="" /></a>

   <script type="text/javascript">// <![CDATA[
   addEventListenerAbstract(window,'load',function () {
      var fp_animation=document.getElementById('image_fader_{RAND%}');
      var fp_animation_fader=document.createElement('img');
      fp_animation.parentNode.insertBefore(fp_animation_fader,fp_animation);
      fp_animation_fader.style.position='absolute';
      fp_animation_fader.src='{$IMG;,blank}';

      {+START,LOOP,IMAGES}
         var url{_loop_key%}='{_loop_var;}';
         new Image().src=url{_loop_key%}; // precache
         window.setTimeout(function()
         {
            var func{_loop_key%}=function()
            {
               fp_animation_fader.src=fp_animation.src;
               setOpacity(fp_animation_fader,1.0);
               nereidFade(fp_animation_fader,0,50,-3);
               setOpacity(fp_animation,0.0);
               nereidFade(fp_animation,100,50,+3);
               fp_animation.src=url{_loop_key%};
            };
            if ({_loop_key%}!=0) func{_loop_key%}();
            window.setInterval(func{_loop_key%},{MILL%}*{IMAGES});
         },{_loop_key%}*{MILL%});
      {+END}
   } );
   //]]></script>
{+END}
Interestingly this fix is entirely done by removing code  :lol:.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#67902
Avatar

Community saint

Thanks Chris and temp1024 for the code fix. It looks like it is working smooth as could be now.
Thanks Eric, wonder why it works fine on your site?

It is working A-OK on both my sites.


Last edit: by friendly


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#67919
Avatar

Community saint

Chris Graham said

Re temp1024…
Took me a little time to work out what you were doing, so must have taken a bit of time to make the fix. Thanks  :thumbs:.
It was certainly a non trivial fix. I was battling a problem of my own (inserting flash videos in blog pages so that they don't cause "flashing" of the entire page when the blog page loads) and I needed a good distraction.

Chris Graham said

This is based on your fix, it is the same except I left the XHTML alone for accessibility and just removed '.nextSibling' to get the position right.
No problems. I haven't done any HTML coding in years, and accessibility compliant coding/auditing for even longer.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: