www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to make the image title and caption move?

  1. #1
    Join Date
    Nov 2013
    Posts
    4

    Question How to make the image title and caption move?

    Hi,

    what I am trying to do here is to make the image title and caption move (like from top to bottom for the title and from right to left for the caption) for each slide of a slideshow.

    I'm using a plugin for the slideshow and it's working perfectly well:

    Code:
    // Set custom shortcut to avoid conflicts
    var $j = jQuery.noConflict();
    
    $j(document).ready(function() {
    
        // Get the slideshow options
        var $slidespeed      = parseInt( meteorslidessettings.meteorslideshowspeed );
        var $slidetimeout    = parseInt( meteorslidessettings.meteorslideshowduration );
        var $slideheight     = parseInt( meteorslidessettings.meteorslideshowheight );
        var $slidewidth      = parseInt( meteorslidessettings.meteorslideshowwidth );
        var $slidetransition = meteorslidessettings.meteorslideshowtransition;
    
        // Setup jQuery Cycle
        $j('.meteor-slides').cycle({
            cleartypeNoBg: true,
            fit:           1,
            fx:            $slidetransition,
            height:        $slideheight,
            next:          '#meteor-next',
            pager:         '#meteor-buttons',
            pagerEvent:    'click',
            pause:         1,
            prev:          '#meteor-prev',
            slideExpr:     '.mslide',
            speed:         $slidespeed,
            timeout:       $slidetimeout,
            width:         $slidewidth
        });
    
        // Setup jQuery TouchWipe
        $j('.meteor-slides').touchwipe({
            wipeLeft: function() {
                $j('.meteor-slides').cycle('next');
            },
            wipeRight: function() {
                $j('.meteor-slides').cycle('prev');
            },
            preventDefaultEvents: false
        });
    
        // Add class to hide and show prev/next nav on hover
        $j('.meteor-slides').hover(function () {
            $j(this).addClass('navhover');
        }, function () {
            $j(this).removeClass('navhover');
        });
    
        // Set a fixed height for prev/next nav in IE6
        if(typeof document.body.style.maxWidth === 'undefined') {
            $j('.meteor-nav a').height($slideheight);
        }
    
        // Add align class if set in metadata
        $j('.meteor-slides').each(function () {
            meteormetadata = $j(this).metadata();
            if (meteormetadata.align == 'left') {
                $j(this).addClass('meteor-left');
            } else if (meteormetadata.align == 'right') {
                $j(this).addClass('meteor-right');
            } else if (meteormetadata.align == 'center') {
                $j(this).addClass('meteor-center');
            }
        });
    
    });
    I've been trying stuff around for some days like using .animate but I always end up breaking the whole code and get a white space instead of the slideshow.

    Do you know how to animate img title and captions with js?
    Here is a jsfiddle: http://jsfiddle.net/sU8AX/
    Thanks

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,154
    try the frameworks forum please.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Nov 2013
    Posts
    4
    Ok I'll post there, how do you delete this one then?

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    Quote Originally Posted by \\.\ View Post
    try the frameworks forum please.
    How is this related to frameworks? Sure, he's using a framework, but he's simply asking "How to make the image title and caption move?" This can be done with Javascript ...
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,154
    It's JQuery which is a framework.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles