01/25/2016 I no longer use the plug-in – I use bootstrap collapsible now.
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.
[expand title=”jquery noconflict set up in the footer instead of the header for faster loading”]
<!–Collapse-O-Matic–>
<!– load jQuery 1.9.1 –>
<script src=”//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–>
[/expand]
[expand title=”Setup Codes”]'[‘expand title=”Setup Codes”]content is in here[/expand’]’ remove the ‘[/expand]
[expand title=”customize color”]
place these lines in the custom style section
.collapseomatic {
color: #F3A333;
}
.colomat-close {
color: #5AF333;
}
.colomat-visited {
color: #F33333;
}[/expand]
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.
[expand title=”ShadowBox”]
[/expand]
[expand title=”PrettyPhoto”]
[/expand]
[expand title=”FancyBox”]
[/expand]
[expand title=”FancyBox 2″]
[/expand]
[expand title=”Mediabox Advanced”]
[/expand]
[expand title=”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=”//www.dognmonkey.com/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>
Use together with PrettyPhoto
<p style=”text-align: center;”><a title=”imagepreview” href=”//dognmonkey.com/media/91alfaspider/91alfa0.jpg” rel=”prettyPhoto”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”//www.dognmonkey.com/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>
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=”//www.dognmonkey.com/media/91alfaspider/91alfa0.jpg” alt=”My Alfa” width=”250″ /></a></p>
[/expand]
Let’s see if all these pop ups and mooimagetip will work together in one page.