JQuery Plugins
Page Scroll
Page scrolls down to here.
HTML CODE:
Copy
<!-- ADD ID TO HREF AND CLASS="PAGE-SCROLL" -->
<a href="#link-01" target="_self" class="page-scroll">LINK TEXT</a>
<!-- ID TO WHERE YOU WANT THE PAGE TO SCROLL TO -->
<a id="link-01"></a>Bootstrap Switch
HTML CODE:
Copy
<input type="checkbox" name="my-checkbox" data-on-color="success" data-off-color="default" data-on-text="Yes" data-off-text="No" data-indeterminate="true">
JAVASCRIPT CODE:
Copy
<script type="text/javascript" src="/scripts/common/js/2015/bootstrap-switch.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// BOOTSTRAP SWITCH
$("[name='my-checkbox']").bootstrapSwitch();
});
</script>ICheck
ICHECK CHECKBOX
ICHECK CHECKBOX
ICHECK CHECKBOX
HTML CODE:
Copy
<input type="checkbox" class="iCheck-square">
ICHECK RADIO
ICHECK RADIO
ICHECK RADIO
HTML CODE:
Copy
<input type="radio" name="my-name" class="iCheck-square">
JAVASCRIPT CODE:
Copy
<script type="text/javascript" src="/scripts/common/js/2015/icheck.v1.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//icheckbox_square
$('.iCheck-square').iCheck({
checkboxClass: 'icheckbox_square',
radioClass: 'iradio_square',
increaseArea: '20%' // optional
});
});
</script>Fancybox
Fancybox via Link
HTML CODE:
Copy
<a href="/en/index.php?f=PAGEID&nhf=T" class="linkexternal fancybox">LINK TEXT</a>JAVASCRIPT CODE:
Copy
<script type="text/javascript" src="/scripts/common/js/2015/jquery.fancybox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// ADD FANCYBOX CLASS TO ANCHOR
$("a.fancybox").fancybox({
type: 'iframe',
iframe: { scrolling: 'yes' },
openEffect: 'elastic',
closeEffect: 'elastic',
width: 1000,
height: '95%',
maxHeight: '95%',
maxWidth: '95%',
overlayColor: '#000',
overlayOpacity: 0.5,
helpers: {
overlay: { fixed:false }
}
});
});
</script>Fancybox via Button
HTML CODE:
Copy
<a href="/en/index.php?f=PAGEID&nhf=T" class="btn btn-primary fancybox">BUTTON TEXT</a>JAVASCRIPT CODE:
Copy
<script type="text/javascript" src="/scripts/common/js/2015/jquery.fancybox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// ADD FANCYBOX CLASS TO ANCHOR
$("a.fancybox").fancybox({
type: 'iframe',
iframe: { scrolling: 'yes' },
openEffect: 'elastic',
closeEffect: 'elastic',
width: 1000,
height: '95%',
maxHeight: '95%',
maxWidth: '95%',
overlayColor: '#000',
overlayOpacity: 0.5,
helpers: {
overlay: { fixed:false }
}
});
});
</script>Fancybox via Image
Click the image to open a larger verison in a fancybox.
HTML CODE:
Copy
<a href="/images/directory/LARGE-IMAGE-NAME.png" class="fancyboximg">
<img src="/images/directory/THUMBNAIL-IMAGE-NAME.png" alt="ALTERNATIVE TEXT" border="0" />
</a>JAVASCRIPT CODE:
Copy
<script type="text/javascript" src="/scripts/common/js/2015/jquery.fancybox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// ADD FANCYBOXIMG CLASS TO ANCHOR WITH IMAGE
$("a.fancyboximg").fancybox({
type: 'image',
iframe: { scrolling: 'yes' },
openEffect: 'elastic',
closeEffect: 'elastic',
width: '95%',
height: '95%',
maxHeight: '95%',
maxWidth: '95%',
overlayColor: '#000',
overlayOpacity: 0.5,
helpers: {
overlay: { fixed:false }
}
});
});
</script>