Fancybox (Tutorial),(Demo) Clean up the clutter

[mmcsus]

I thought I would share this with everyone, I've seen it ask many times.
  I'm going to use "useful Info" as an example. You can put anything you want into fancybox.
You should be able to use my code without changing anything.  Demo --> http://jsfiddle.net/mmcsus/kQn9D/18/
  Edit your item.php place the following code right before the ending head tag.

Code: [Select]

        <script type="text/javascript">
            $(document).ready(function(){
                $("a#inline4").fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
      scrolling: 'no',
       padding: [0,  0, 0,  0],
                    nextEffect : 'fade',
                    prevEffect : 'fade',
                    loop : false,
                    helpers : {
                            title : {
                                    type : 'inside'
                            }
                    }
                });
            });
        </script>
 Now add the following to where you want the button to be, maybe next to the share button.
  Notice the button will display "Avoid Scams" change it to your liking.

Code: [Select]

  <p class="button3"id="btnShowForm3">
                        <span class="info"><a id="inline4" href="#Mydiv4"><?php _e('Avoid Scams', 'modern') ; ?></a></span>
  </p>
Now find your useful Info around line 110

Code: [Select]

    <div id="useful_info">
                    <h2><?php _e('Useful information', 'modern') ; ?></h2>
                    <ul>
                        <li><?php _e('Avoid scams by acting locally or paying with PayPal', 'modern'); ?></li>
                        <li><?php _e('Never pay with Western Union, Moneygram or other anonymous payment services', 'modern'); ?></li>
                        <li><?php _e('Don\'t buy or sell outside of your country. Don\'t accept cashier cheques from outside your country', 'modern'); ?></li>
                        <li><?php _e('This site is never involved in any transaction, and does not handle payments, shipping, guarantee transactions, provide escrow services, or offer "buyer protection" or "seller certification"', 'modern') ; ?></li>
                    </ul>
  </div>
Change to:

Code: [Select]

<div id="Mydiv4" style="display:none">
    <div id="useful_info">
                    <h2><?php _e('Useful information', 'modern') ; ?></h2>
                    <ul>
                        <li><?php _e('Avoid scams by acting locally or paying with PayPal', 'modern'); ?></li>
                        <li><?php _e('Never pay with Western Union, Moneygram or other anonymous payment services', 'modern'); ?></li>
                        <li><?php _e('Don\'t buy or sell outside of your country. Don\'t accept cashier cheques from outside your country', 'modern'); ?></li>
                        <li><?php _e('This site is never involved in any transaction, and does not handle payments, shipping, guarantee transactions, provide escrow services, or offer "buyer protection" or "seller certification"', 'modern') ; ?></li>
                    </ul>
</div>
</div>
Now edit your style.css around line 320

Code: [Select]

/* Useful info */
.item #useful_info { background:#f7f7f7; border: 1px solid #DDD; clear:both; padding:15px 20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin-bottom: 10px; }
.item #useful_info h2 { border:none; margin:0; }
.item #useful_info ul { list-style:disc outside; padding-left:20px; }
.item #useful_info ul li { line-height:18px; margin-top:8px; }
Style the button anyway you like but you can start out like this:
   You will notice the .item is missing before #useful_info this has to be done or you will lose your style inside Fancybox.

Code: [Select]

/* Useful info */
#useful_info { background:#ffe5e0; border: 1px solid #DDD; clear:both; padding:15px 20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin-bottom: 10px; }
#useful_info h2 { border:none; margin:0; }
#useful_info ul { list-style:disc outside; padding-left:20px; }
#useful_info ul li { line-height:18px; margin-top:8px; }
.item .button3 { line-height:normal; padding-top:0px; }
.item .button3 .info { margin-left: 10px; }
.item .button3 span { background-color:#84c4ff;box-shadow: 1px 1px 1px #c9c6c6; border:1px solid #5fb2ff; float:left; padding:6px 10px 7px; -moz-border-top-left-radius:5px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px;-moz-border-bottom-left-radius:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-bottom-right-radius:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px;-moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; }
.item .button3 span a {text-shadow: #9b9b9b 0 -1px 0; color:#FFF; float:left; text-decoration:none; }
.item .button3 span a:hover { color:#00FFFF;}
This has been tested in 3.0.2 modern theme.
That's it.
Happy New Year!

[tomshaft]

mmcsus,
Thanks for the post. I like this. Going to use it in bcute theme when I get it to work. Right now when button clicked it grays out screen and shows the "X" button. No box or contents.
Nice job.Thanks
Tom

[mmcsus]

Thanks Tom,
     Just wanted to say if you put Google maps inside Fancybox you may have some problems because maps is interactive but it works.

[towkey]

i try this code to bcute theme 1.13 but when i click avoid scam button its out blank info just have X(close) button..can u help..thanks

[mmcsus]

@Tom & towkey

It seems that bcute is using an older version of fancybox than modern theme.

I have it working with bute, here is what I found.

In bcute item.php find around line 5:

Code: [Select]

<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('fancybox/jquery.fancybox-1.3.4.js') ; ?>"></script>
        <link href="<?php echo osc_current_web_theme_js_url('fancybox/jquery.fancybox-1.3.4.css') ; ?>" rel="stylesheet" type="text/css" />
Change to:

Code: [Select]

<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('fancybox/jquery.fancybox.js') ; ?>"></script>
        <link href="<?php echo osc_current_web_theme_js_url('fancybox/jquery.fancybox.css') ; ?>" rel="stylesheet" type="text/css" />
Rename your oc-content/themes/becute/js/fancybox folder.

After that copy from modern 3.02 or 3.1 fancybox folder to:

oc-content/themes/becute/js

I have tested this in Osclass 3.1 bcute theme.

Hope that helps

[tomshaft]

Thanks mmcsus. Works for me.
 
Tom

[towkey]

Rename your oc-content/themes/becute/js/fancybox folder.
After that copy from modern 3.02 or 3.1 fancybox folder to:

oc-content/themes/becute/js

I have tested this in Osclass 3.1 bcute theme.

Hope that helps

i cant understand this..can u detail it or give example..thanks for your help.

[Kenson@comcast.net]

This might seem like a dumb question but where is the ending head tag?

Sorry, newbie!

[mmcsus]

@ Kenson@comcast.net

That would be in your oc-content/themes/Your_theme/item.php at the top of the page.

Code: [Select]

</head>

[Hostingames]

hi

we can do the same with the comment?
is it the same code set thank you

[mmcsus]

No, I don't think this is the code you are looking for.

Please revisit this post:

http://forums.osclass.org/general-help/how-to-hide-comments-hide-a-menu/

[d0v1k]

Can you explain how you did it for comments?

Thx

[thedaigle]

edit: trial & error.

[plesk]

good evening
I have the code for the bender theme please thank you

osclass 3.2.1 bender theme

[Mahendar]

Hi can anybody help me out how to add youtube video as fancybox style on my main.php page for modern theme. kindly explain clearly i not much knowledge about js and css