Moving 'title' down to where 'counter' is.

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Moving 'title' down to where 'counter' is.

Asparagus
As the subject of this message explains, I'm trying to move the shadowbox_title DIV down to where the shadowbox_counter DIV is, so there's nothing above the image and the counter is not used.

I've tried fiddling with shadowbox.js, but just can't seem to get this final thing done.

Otherwise, great product. Keep up the great work.
Reply | Threaded
Open this post in threaded view
|

Re: Moving 'title' down to where 'counter' is.

no64
This is something, that would I would like to know too
Reply | Threaded
Open this post in threaded view
|

Re: Moving 'title' down to where 'counter' is.

Asparagus
In reply to this post by Asparagus
I've pretty much narrowed it down to around the 'line 370' part of shadowbox.js

Problem is that if I try to move anything around, which should logically work, it screws the whole thing up.

So, if there is any kind soul out there, that has fixed this before, or knows how, there will be plenty of good karma vibes sent your way.

Many thanks in advance.
Reply | Threaded
Open this post in threaded view
|

Re: Moving 'title' down to where 'counter' is.

Asparagus
In reply to this post by Asparagus
Still trying, but no luck.

I have a long weekend coming up and now that I have time for it, I'd really appreciate some help on this.

So, if there is a kind (and clever) soul out there...

Thanks in advance.
Reply | Threaded
Open this post in threaded view
|

Re: Moving 'title' down to where 'counter' is.

DerDings
Hi Asparagus!

A quick and dirty solution, not tested:

  • At first, you have to edit the html-markup. Start editing in shadowbox.js, beginning @ line 370, it should look like this:
    main:       <div id="shadowbox_overlay"></div> +
                   <div id="shadowbox_container"> +
                       <div id="shadowbox"> +
                           <div id="shadowbox_body"> +
                               <div id="shadowbox_body_inner"></div> +
                               <div id="shadowbox_loading"></div> +
                           </div> +
                           <div id="shadowbox_title"> +
                               <div id="shadowbox_title_inner"></div> +
                           </div> +
                           <div id="shadowbox_toolbar"> +
                               <div id="shadowbox_toolbar_inner"></div> +
                           </div> +
                       </div> +
                   </div>,
    
    That's all - it should work now!


  • If you want to, you can edit shadowbox.css - for positioning and design. for example, if you want the title on the left and the toolbar on the right:
    • add
      float:left;
      to
      #shadowbox_title
    • remove
      height:20px;
      from
      #shadowbox_toolbar
    • add
      clear:both;
      to
      #shadowbox_body
    • edit
      height:
      and
      width:
      of
      #shadowbox_title
      and
      #shadowbox_toolbar
      as you like it
HTH Der Dings
Reply | Threaded
Open this post in threaded view
|

Re: Moving 'title' down to where 'counter' is.

Straifer
That's about what I did as well.  Now if you could just point me in the right direction with adding Javascript items into it like Paypal buttons, etc.  That would be great!
Reply | Threaded
Open this post in threaded view
|

Re: Moving 'title' down to where 'counter' is.

Asparagus
In reply to this post by DerDings
Oh man, thanks a million DerDings. I think I must've tried every variation, except that one.

When I first tried, it looked completely messed up, but I realised I had to put the apostrophes around the div tags again.

'<div></div>' not <div></div>

Absolutely brilliant. Thanks again.