Question

I am working on a Gallery section which has Photos & Video section.

I Every thing is fine with the photo gallery & it is working fine. example: Photo Gallery URL http://tinyurl.com/bsqd5lp

In photo gallery i am using 'titleFromAlt': true, to pass the title using alt tag. alt tag has customized title example <span>2012-07-02</span><br><span>Department of Tourism</span>

I want to do same for the video galley but i cant achieve this using 'titleFromAlt': true,. The way i doing it is not good as it show the title when one hover over the image as HTML code. Example: Video Gallery URL http://tinyurl.com/bsdq694

Other issue i have with this is the title of the video come in center. I tried to change the CSS so that title will be left aligned.

.fancybox-title-float {
    position: absolute;
    left: 0;
    bottom: -20px;
    height: 32px;
    float:left;
}

For some reason i am not able to overnight the above code even if i place this after displaying image.

Help this is regard in appreciated.

UPDATED:

code for you tube videos

$(document).ready(function () {
    $(".youtube").click(function () {
        $.fancybox({
            'padding': 0,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'title': this.title,
            'titleFromAlt': true,
            //'titlePosition': 'over',
            'width': 680,
            'height': 495,
            'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type': 'swf',
            'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
        });
        return false;
    });
});

Answer 1

One thing that we have overlooked is that for your videos you are using the manual method via .click() and not the regular way to bind fancybox to a selector via .fancybox()

In this scenario – using .click()– the titleFromAlt option won’t work, however you still can set the fancybox title from the alt attribute stored in your img tag using a regular jQuery expression.

so try this script

$(document).ready(function () {
    $(".youtube").click(function () {
     // first, get the value from the alt attribute
        var newTitle = $(this).find("img").attr("alt"); // NEW
        $.fancybox({
            'padding': 0,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
          //'title': this.title, // we will replace this line
            'title' : newTitle,  //<--- this will do the trick
          //'titleFromAlt': true,  // we don't need this anymore
          //'titlePosition': 'over', 
            'width': 680,
            'height': 495,
            'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type': 'swf',
            'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
        });
        return false;
    });
});

… assuming that you have an alt attribute in the img tag.

Sorry for the confusion and all the comments back and forth.