Fancybox 2: styling direct link

Question

I'm having some issues figuring out how to style fancybox. At the moment my options that I've set are piecemeal from other locations.

I found something on creating a direct link to a fancybox image and triggering the lightbox functionality which is this:

<!-- Fancybox remote link trigger -->
<script type="text/javascript">
    var thisHash = window.location.hash;
        $(document).ready(function() {
            if(window.location.hash) {
                $(thisHash).fancybox().trigger('click');
            }
            $('.fancylink').fancybox();

        }); // ready
</script>

This works great. I set up an id in each link and I can get a direct url that triggers fancybox when you go to it. The problem though is I don't understand how to style fancybox correctly, and honestly the documentation is pretty weak. I managed to style my main fancybox implementation through more piecemeal here:

<script type="text/javascript">
    var thisHash = window.location.hash;
    $(document).ready(function() {
        if(window.location.hash) {
            $(thisHash).fancybox().trigger('click');
        }
            $('.fancylink').fancybox();
        $(".fancybox").fancybox({
            helpers : { 
                title : { type : 'inside' }
            }, // helpers
            beforeShow : function() {
                this.title = (this.title ? '' + this.title + '' : '') + '<br>' + '<span style="font-family:Open Sans, sans-serif; color:#bfbfbf; font-size: 12px;">' + 'Image ' + (this.index + 1) + ' of ' + this.group.length;  
            } // beforeShow
        }); // fancybox
    }); // ready
</script>

This has all the proper options and styling I want with a secondary line that displays photo count, but I don't get that for my direct link code up above. I tried combining the two but no luck, I either bork it or don't get a result rendered. I'm assuming I CAN combine these two chunks together, but I'm just not sure how.

Answer 1

You just have to provide the fancybox options to your working code like this:

EDIT. fixed prevuous code

<!-- Fancybox remote link trigger -->
<script type="text/javascript">
   var thisHash = window.location.hash;
    $(document).ready(function() {

        $(thisHash).fancybox({
            helpers : { 
               title : { type : 'inside' }
            }, // helpers
            beforeShow : function() {
               this.title = (this.title ? '' + this.title + '' : '') + '<br>' + '<span style="font-family:Open Sans, sans-serif; color:#bfbfbf; font-size: 12px;">' + 'Image ' + (this.index + 1) + ' of ' + this.group.length;  
            } // beforeShow
        });
        if(window.location.hash) {
            $(thisHash).trigger('click');
        }
    }); // ready
</script>