Jquery Collapse-O-Matic Plugin

I really like the Jquery Collapse-O-Matic plugin. It does make the long page looks better. Since I used so many Jquery application, I have to make .noconflict for this plugin to work with Fancybox using old jquery 1.25 which doesn’t work with Collapse-O-Matic using 1.9.1.

The plugin loads “js/collapse.min.js” and “dark_style.css” or “light_style.css” automatically to the header. I need to manually create modify “collapse.min.js” to ‘collapse_fix.js’ for noconflict jquery. Rename the “js” folder to ‘js1′ so the plugin doesn’t load the correct ‘collapse.min.js’.

Modify ‘collapse.min.js’ for jquery noconflict.

Replaced all jQuery in the script to jQuery_omatic then save it to collapse_fix.js, then apply noconflict script above the link of the “collapse_fix.js” in the footer like so.

jquery noconflict set up in the footer instead of the header for faster loading


<!–Collapse-O-Matic–>
<!– load jQuery 1.9.1 –>
<script src=”http://code.jquery.com/jquery-1.9.1.js“></script>
<script type=”text/javascript”>
var jQuery_omatic = $.noConflict(true);
</script>
<script src=”/idogjs/collapseomatic/collapse_fix.js” type=”text/javascript”></script>
<!–End Collapse-O-Matic–>

Setup Codes

‘['expand title="Setup Codes"]content is in here[/expand']‘ remove the ‘

There are many pop-ups (modals) software out there to make the page display pictures and other stuff looks beter. These are some of the ones I like.

ShadowBox

PrettyPhoto

FancyBox

FancyBox 2

Mediabox Advanced

ImagePreview

Used together with Mediabox Advanced

<p style=”text-align: center;”><a title=”imagepreview” href=”/media/91alfaspider/91alfa0.jpg” rel=”lightbox”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”http://www.dognmonkey.com/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>

My Alfa

Use together with PrettyPhoto

<p style=”text-align: center;”><a title=”imagepreview” href=”http://dognmonkey.com/media/91alfaspider/91alfa0.jpg” rel=”prettyPhoto”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”http://www.dognmonkey.com/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>

My Alfa

Use together with Shadowbox

<p style=”text-align: center;”><a title=”imagepreview” href=”/media/91alfaspider/91alfa0.jpg” rel=”shadowbox”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”http://www.dognmonkey.com/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>

My Alfa

Let’s see if all these pop ups and mooimagetip will work together in one page.

Mooimagetip

Random Popular Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>