Show animated Image Caption using jQuery in ADF Faces

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 image when jsf page is loaded at client browser
you can check this in html source of your page in 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 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 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 viewController project (Jdev 12.1.3)





• Add jQuery library and script file reference to 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 jQuery function on pageload 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 function for two different images (for first image animation type is slide (default) and for second it is fade), add clientListener to document tag and set it's type to 'load' (to execute jQuery function on pageload)



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



• Run application and see 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-

Thanks, Happy Learning :)
Download Sample ADF Application

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

Jquery is most popular javascript library ,it is used to provide better ui design, animations and client side events
This is another post about using jquery in ADF Faces, see previous post
Using JQuery in Oracle ADF

In this post i am using a jquery script to zoom (enlarge) image on hover , you have seen this in many e-commerce websites as they provide power zoom feature to enlarge product image for better customer experience



I have taken this jquery script from Dynamic Drive, see the documentation
To implement this in ADF Application follow these steps

• Create a Fusion Web Application and a page in viewController project (Jdev 12.1.3)





• Downloaded jquery script file from above link -ddpowerzoomer.js, add this jquery file to viewController project





• Now add jquery library reference in page in order to use jquery functions



<af:resource type="javascript" source="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></af:resource>
            <af:resource type="javascript" source="js/ddpowerzoomer.js"/>



• Next step is to add an image to page , so added an af:image to page and set path of image to display





• Now i have to execute jquery function that will add power zoom feature to this image (See jquery code that will be executed on pageload)



jQuery(document).ready(function($){
 $('#i1').addpowerzoom({
  defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) 
})


here i1 is the id of image, default zoom power and magnifier size is configured here

• So to execute this jquery function on pageload , added a clientListenr to pagelike this



<af:clientListener type="load"
                               method="jQuery(document).ready(function($){   $('#i1').addpowerzoom({  defaultpower: 2,  powerrange: [2,5],  largeimage: null,  magnifiersize: [75,75]  }) })"/>



• Now run this application and check it, magnifier is on deer :)





• Now i am increasing size and power of magnifier - Power is 3 and size is 200x200

Thanks, Happy Learning :)
Download Sample ADF Application

Using af:deck component to animate content in ADF 12c(12.1.3)

Hello all,
af:deck is new component introduced in ADF 12.1.3, see more detail on Oracle Docs
af:deck-Tag Referance
http://docs.oracle.com/middleware/1213/adf/tag-reference-faces/tagdoc/af_deck.html
ADF Faces Demo Server (deck demo)

As per oracle docs-
The deck component is a container that shows one child component at a time. When changing which child is displayed, the transition can be animated.
This component does not provide any built-in controls for choosing which child is displayed. Instead, you use some other component to control it. For example, you might use an external navigationPane tab bar or perhaps some external commandImageLinks to represent page progress dots. You are not limited to external controls, your deck might be displaying a series of images and you may want to put a link around each image to trigger advancing to the next image. In all of these cases, you will need to use an event handler function to change the displayed child.

So in this post i am going to show - how to use af:deck component with some animation effect?
in this post i am using 6 images to display on 6 different links

• so designed page like this, inside deck there is 6 images, and there are 6 image links outside deck , each link is associated with managed bean actionListener 



<af:panelGroupLayout id="pgl4" layout="horizontal" halign="center">
          <af:link id="l1" icon="#{resource['images:circle-lblue.png']}"
                   actionListener="#{viewScope.DynamicDeckBean.link1Action}" partialSubmit="true"/>
          <af:link id="l2" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link2Action}"/>
          <af:link id="l3" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link3Action}"/>
          <af:link id="l4" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link4Action}"/>
          <af:link id="l5" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link5Action}"/>
          <af:link id="l6" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link6Action}"/>
        </af:panelGroupLayout>

• created binding for deck in managed bean , and added af:transition for back and forward animation for images



<af:deck id="d1" displayedChild="i1" binding="#{viewScope.DynamicDeckBean.deckBind}">
          <af:transition triggerType="forwardNavigate" transition="flipLeft"/>
          <af:transition transition="flipRight" triggerType="backNavigate"/>
          <af:image source="#{resource['images:1.jpg']}" shortDesc="Wild Life 1" id="i1"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:2.jpg']}" shortDesc="Wild Life2" id="i2"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:3.jpg']}" shortDesc="Wild Life3" id="i3"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:4.jpg']}" shortDesc="Wild Life4" id="i4"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:5.jpg']}" shortDesc="Wild Life5" id="i5"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:6.jpg']}" shortDesc="Wild Life6" id="i6"
                    inlineStyle="height:300px;width:500px;"/>
        </af:deck>



• Now page looks like this





• Refer the above links- there is a method to animate deck's child , i have used same method

See managed bean code for links and to animate deck child


    // Animate the display of a deck child.
    private void _animateDeckDisplayedChild(UIComponent eventComponent, int newDisplayedChildIndex) {
        // Find the nearest deck ancestor:
        RichDeck deck = null;
        String eventComponentId = eventComponent.getId();
        while (deck == null) {
            if (eventComponent == null) {
                System.err.println("Unable to locate a deck ancestor from id " + eventComponentId);
                return;
            } else if (eventComponent instanceof RichDeck) {
                deck = (RichDeck) eventComponent;
                break;
            }
            eventComponent = eventComponent.getParent();
        }
        System.out.println("Child is-" + eventComponent.getId());
        String newDisplayedChild = deck.getChildren().get(newDisplayedChildIndex).getId();

        // Update the displayedChild:
        System.out.println("Display Child-" + newDisplayedChild);
        deck.setDisplayedChild(newDisplayedChild);

        // Add this component as a partial target:
        RequestContext.getCurrentInstance().addPartialTarget(deck);
    }


Code to change image and calling method to animate, here 0,1,2 are index no. of deck's children



/**Methods to be called on different links to show different images*/
    public void link1Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 0);// 0 for first child of deck
    }
    public void link2Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 1);// 1 for second child of deck
    }
    public void link3Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 2);
    }
    public void link4Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 3);
    }
    public void link5Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 4);
    }
    public void link6Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 5);
    }



• Now run application and click on links :) see how deck works

See live -how af:deck works

So Happy Learning Sample ADF Application