List of classes
Medicom has Four different layouts.
you can choose 1 from 8 color schemes. just Include Css file of your favourite colour.
Medicom has many pages to display your content baeautifully.
List of all pages
Medicom is providing Three beautifull layouts with nimble and preety photo effects for your portfolio.
Portfolio Pages
Css
<link rel="stylesheet" type="text/css" href="css/reset.css" >
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" >
Scripts
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>Code
<script> //Portfolio var $container = $('.portfolio'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false, } }); $('nav.primary ul a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false, } }); return false; }); var $optionSets = $('nav.primary ul'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('nav.primary ul'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); }); //preetyphotoeffect jQuery(document).ready(function(){ jQuery('a[data-gal]').each(function() { jQuery(this).attr('rel', jQuery(this).data('gal')); }); jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:false,overlay_gallery: false,social_tools:false,deeplinking:false}); }); </script>Medicom is providing Three different blog layouts and one detail page. Which are very simple to use no scripts are required.
Medicom has many USEFUL Fonts Icons. You can use Icons anywhere in anysize. which are included in medicom.css file
Code
@import "font-awesome.css";
Medicom is Retina Ready so the theme will look fantastic on High Resolution displays like the iPad or iPhone Retina devices. Please read below to understand how this process works.
There are two different sets of images/graphics that can be Retina Ready
Medicom has many USEFUL Typographic elements.
List Of Typofraphy
Revolution Slider
Css Files
<link rel="stylesheet" type="text/css" href="css/revolution_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/settings.css" media="screen" />
Scripts
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
Code
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:890,
startheight:450,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:4,
hideThumbs:200,
navigationType:"both", //bullet, thumb, none, both (No Shadow in Fullwidth Version !)
navigationArrows:"verticalcentered", //nexttobullets, verticalcentered, none
navigationStyle:"round", //round,square,navbar
touchenabled:"on", // Enable Swipe Function : on/off
navOffsetHorizontal:0,
navOffsetVertical:20,
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
</script>
-------------------------------------------------------------------
Owl Carousal
Css Files
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
Js Files
<script type="text/javascript" src="js/owl.carousel.js"></script>
Code
<script>
$("#medicom-carousel").owlCarousel({
items : 3,
itemsDesktop : [1170,3],
itemsDesktopSmall : [979,2]
});
</script>
-------------------------------------------------------------------
Jcarousel
Css Files
<link rel="stylesheet" type="text/css" href="css/jcarousel-skin.css" />
Code
Js Files
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
Code
<script>
jQuery('#doctors-list').jcarousel({
scroll :1
});
</script>
-------------------------------------------------------------------
Pie Charts
Css Files
<link rel="stylesheet" type="text/css" href="css/piechart-style.css" />
Js Files
<script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
-------------------------------------------------------------------
Counters
Js Files
<script type="text/javascript" src="js/counters.js"></script>
-------------------------------------------------------------------
Anything slider
Css Files
<link rel="stylesheet" type="text/css" href="css/anythingslider.css" />
Js Files
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
Code
<script>
$('#slider').anythingSlider();
</script>
-------------------------------------------------------------------
Pie Charts
Css Files
<link rel="stylesheet" type="text/css" href="css/piechart-style.css" />
Js Files
<script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
-------------------------------------------------------------------
Way point
Jquery way point allows a function to run on section load.
Js Files
<script type="text/javascript" src="js/waypoints.js"></script>
Code
<script>
$('#counters').waypoint(function(direction) {
Your Code here...
});
</script>
-------------------------------------------------------------------
Full width video
Js Files
<script type="text/javascript" src="js/video.js"></script>
-------------------------------------------------------------------
Form styling
We use jquery sexy form.
Css Files
<link rel="stylesheet" type="text/css" href="css/uniform.default.css" />
Js Files
<script type="text/javascript" src="js/jquery.uniform.js"></script>
Code
<script>
$("select").uniform();
</script>
-------------------------------------------------------------------
Parallax backgrounds
jquery seller is used to make any background image parallax style.
Js Files
<script type="text/javascript" src="js/jquery.uniform.js"></script>
Code
<script>
$.stellar({
horizontalScrolling: false,
verticalOffset: 0
});
</script>
-------------------------------------------------------------------
Fancybox
We use jquery fancybox to show video in fancybox.
Css Files
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" />
Js Files
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="js/jquery.fancybox-media.js?v=1.0.6"></script>
Code
<script>
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
</script>