Show animated Image Caption using jQuery in ADF Faces

Sharing is Caring

This is another post about using jQuery in ADF Faces, see previous posts on jQuery

Using JQuery in Oracle ADF 
Image zoom (power zoomer) effect using Jquery in ADF Faces

This post talks about – how to add mouse hover caption to images? Caption means a brief explanation of picture/image. Normally ‘alt’ attribute of HTML page is used as Image Caption
But in ADF Faces af:image doesn’t has ‘alt’ property, there is a property called ‘shortdesc’ and this property is used as ‘alt’ attribute for the image when JSF page is loaded at the client browser
you can check this in HTML source of your page in the browser (inspect element)

<af:image shortDesc="Black Horse running or flying" id="FirstImage"
                                  inlineStyle="height:300px;width:500px;"
                                  source="#{resource['images:Best-Wild-Animal-Photos-of-2012-307-black-horse-running.jpg']}"/>

JSF page is converted to HTML for client-side presentation, see in HTML source ‘shortdesc’ is used as ‘alt’ property

jQuery is used for client-side scripting of HTML so jQuery script makes use of this ‘alt‘ attribute to show animated caption for the image
There are lots of jQuery and JavaScript available for showing different types of captions, here I am using jQuery Capty – A Caption Plugin (Download jQuery script and respective CSS file from the link)

Now follow steps to use this jQuery plugin with ADF Faces

    • Create Fusion Web Application and a page in viewController added jQuery script and CSS in the viewController project (Jdev 12.1.3)

 

 

    • Add jQuery library and script file reference to the page, also add CSS file reference to page

 //jQuery library reference
            <af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></af:resource>
            //jQuery file reference that will be used to show caption
            <af:resource type="javascript" source="js/jquery.capty.js"/>
            <af:resource type="javascript" source="js/jquery.capty.min.js"/>
            //CSS file to style Caption
            <af:resource type="css" source="css/jquery.capty.css"/>

 

    • Next step is to execute a jQuery function on page load to show caption

//Function to show default sliding caption

$('#ImageId').capty();

//Change default fucntion to change animation type , speed and height of caption

$('#ImageId').capty({
animation: 'fade',
speed: 1000
})

 

    • So here I am using both functions for two different images (for first image animation type is slide (default) and for the second it is fade), add clientListener to document tag and set it’s type to ‘load’ (to execute the jQuery function on page load)

 <af:clientListener method="jQuery(document).ready(function($){ $('#FirstImage').capty(); $('#SecondImage').capty({animation: 'fade',   speed:     1000}) })" type="load"/>

 

    • Run the application and see the magic of jQuery

Image Caption (animation:slide)-

Image Caption (animation:fade)-

 

    • You can change style (color,font etc) of caption box by modifying css sheet and size can be increased or decreased from jQuery function. for example i have changed color, font and size of caption box. see this

@CHARSET "UTF-8";

div.capty-caption {
background-color: red;
color: #FFF;
font: bold 11px cursive;
padding-left: 10px;
padding-top: 7px;
text-shadow: 1px 1px 0 #222;
}

div.capty-caption a {
color: #318DAD;
font: bold 11px verdana;
text-decoration: none;
text-shadow: none;
}

jQuery function to increase size-

jQuery(document).ready(function($){ $('#FirstImage').capty(); $('#SecondImage').capty({animation: 'fade',   speed:1000,height:50}) })

See output-

Image Caption using jQuery

Thanks, Happy Learning 🙂
Download Sample ADF Application

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *