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 Full-Size?

Login / Search

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

Fan in action

After an upgrade to 9.0.2, the image fader now looks like this:




How can I make it full size again (fills that container)?

It did say "Media" to the left of the picture, but I did somehow get
that to disappear.



Thanks!


Last edit: by WebBasser

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#92601
Avatar

Is this on a newly created v9 theme, or a theme that has been upgraded in some way?


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:
#92603
Avatar

Fan in action

Hi Chris,
I ran the upgrader, and that broke all of my old themes (basically the same theme layout, just in different colors (via theme wizard) with different headers and backgrounds for different zones.

I'm now creating themes as above with the theme wizard, and have even taken the image fader block out and then installed it again - same issue.

Not sure what to do.

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#92604
Avatar

Oh, I thought you were reporting that the description text you see in the right of those pictures was leaking out.

If you fill in descriptions for the images, those descriptions will show in the image fader block.

This is the new design – it has become a slider like is used on many sites nowadays.

If you still want the very simple fader block, you'll need to simply the HTML in BLOCK_MAIN_IMAGE_FADER.tpl, e.g:

Code

{$SET,RAND,{$RAND}}

<div class="img_thumb_wrap">
   <a href="{GALLERY_URL*}"><img class="img_thumb" id="image_fader_{$GET,RAND}" src="{FIRST_URL*}" alt="" /></a>
</div>

<noscript>
   {+START,LOOP,HTML}
      {_loop_var}
   {+END}
</noscript>

<script type="text/javascript">// <![CDATA[
   add_event_listener_abstract(window,'load',function () {
      var fp_animation=document.getElementById('image_fader_{$GET,RAND}');
      var fp_animation_fader=document.createElement('img');
      var tease_scrolling_text=document.getElementById('image_fader_scrolling_text_{$GET,RAND}');
      fp_animation_fader.className='img_thumb';
      fp_animation.parentNode.insertBefore(fp_animation_fader,fp_animation);
      fp_animation.parentNode.style.position='relative';
      fp_animation.parentNode.style.display='block';
      fp_animation_fader.style.position='absolute';
      fp_animation_fader.src='{$IMG;,blank}';

      {+START,LOOP,HTML}
         var html{_loop_key%}='{_loop_var;^}';
         {+START,IF,{$EQ,{_loop_key},0}}
            if (tease_scrolling_text) set_inner_html(tease_scrolling_text,html{_loop_key%});
         {+END}
      {+END}
      {+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;
               set_opacity(fp_animation_fader,1.0);
               fade_transition(fp_animation_fader,0,50,-3);
               set_opacity(fp_animation,0.0);
               fade_transition(fp_animation,100,50,3);
               fp_animation.src=url{_loop_key%};
               window.setTimeout(function() {
                  fp_animation_fader.style.left=((find_width(fp_animation_fader.parentNode)-find_width(fp_animation_fader))/2)+'px';
                  fp_animation_fader.style.top=((find_height(fp_animation_fader.parentNode)-find_height(fp_animation_fader))/2)+'px';
               },0);
               if (tease_scrolling_text)
               {
                  set_inner_html(tease_scrolling_text,html{_loop_key%});
               }
            };
            if ({_loop_key%}!=0) func{_loop_key%}();
            window.setInterval(func{_loop_key%},{MILL%}*{IMAGES});
         },{_loop_key%}*{MILL%});
      {+END}
   } );
//]]></script>


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:
#92642
Avatar

Fan in action

Hi Chris,
I cut and pasted that code for the BLOCK_MAIN_IMAGE_FADER.tpl and
I didn't see any change.

Are there any other file(s) that need to be updated?

Thanks for your time.

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#92643
Avatar

Did you do it from inside ocPortal? If not, the block cache would not know to empty.

(Plus doing it outside ocPortal is a bad idea, as it'll get wiped as soon as there's an upgrade)


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:
#92650
Avatar

Fan in action

Chris,
I actually pasted that code into a new file, named it BLOCK_MAIN_IMAGE_FADER.tpl and then uploaded it via FTP to the proper directory - themes/default/templates/ (after re-naming/deleting the original file).

Is this the problem?

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#92651
Avatar

Community saint

WebBasser said

Chris,
I actually pasted that code into a new file, named it BLOCK_MAIN_IMAGE_FADER.tpl and then uploaded it via FTP to the proper directory - themes/default/templates/ (after re-naming/deleting the original file).

Is this the problem?
Yes, that's doing it "outside ocPortal" as Chris mentioned. Also, as you copied the file to /templates/ instead of /templates_custom/, the changes will be lost when an upgrade occurs.

ocPortal won't be aware of the change you made so you need to manually force the block cache to be cleared. Go to Admin Zone Tools Website cleanup tools and select the Block cache option.



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:
#92745
Avatar

Fan in action

Hi Guys,
Appreciate the help. I uploaded the file to the 'templates_custom' directory, then cleared the Block cache...no change.

Will try to create the file within ocP and see what happens.

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
Posted
Rating:
#92787
Avatar

Fan in action

I'm getting closer!

By the way, I had to change the 175px image size in the galleries.css as well.

However, now I have a space that I'm having a hard time getting rid of...



Any idea how to eliminate that and close it up to make it look better?

Thanks again for getting me this close!

"Be true to yourself. Be who you are in your heart. Don't hang out with idiots. If you surround yourself with good people, you'll go far. If you start hanging out with knuckleheads, you'll be right in the knucklehead section the rest of your life." — Kid Rock
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: