SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to move caption text below a gallery, but it disappears

    Can anyone suggest a way to modify this image slider? There is a "caption text" that appears on the bottom of every image and I would like to move this caption area below the thumbnails. I've tried to move the caption padding down, however it is disappearing behind the main image. I would like for it to go Main Image > Thumbnails > Caption Text. Any ideas? I thought it would be simple but I am having problems.

    Here is a working example
    http://manufacturingforchange.org/1/test.php

    Here is the CSS
    Code:
    .svwp {width: 50px; height: 20px; background: #fff;} /*preloader stuff. do not modify!*/
    .svwp ul{position: relative; left: -999em;}/*preloader stuff. do not modify!*/
    .slideViewer { 
    position: relative;
    overflow: hidden; 
    margin: 0;
    padding: 0;
    background: #fff;
    }
    .slideViewer ul {  /*your list of images*/
    position: relative;
    left: 0;
    top: 0;
    width: 1%;
    list-style-type: none;
    margin: 0; 
    padding: 0;
    }
    .slideViewer ul li {
    float:left;
    }
    
    /*typographic info*/
    .slideViewer span.typo{ 
    padding: 6px; /* do not modify padding */
    background: #fff;
    color: #000;
    font: normal 10px Verdana;
    }
    
    .thumbSlider { /*the thumbnails slider*/
    overflow: hidden;
    width: 1%;
    background: #fff;
    }
    .thumbSlider ul { 
    list-style-type: none;
    margin: 0; 
    padding: 0;
    }
    .thumbSlider ul li{ 
    float:left;
    margin: 0;
    }
    .thumbSlider a{
    color: #fff;
    text-decoration: none;
    }
    .thumbSlider a img{
    border: 0;
    display: block;
    padding: 0;
    }
    .thumbSlider p.tmbrdr { /* the border above -not around- each thumb */
    /* width, height and top values are dynamically added by the script. Do not modify. */
    position:relative; 
    left: 0;
    font-size: 0.01em;
    left: 0;
    margin: 0;
    padding: 0;
    }
    
    a.left, a.right { /*the left and right buttons (links)*/
    background: transparent; /* could be any color  */
    color: #ff0000;
    font: bold 16px Arial;
    overflow: hidden;
    }
    a.left span, a.right span{
    
    }
    a.left img, a.right img{
    border: 0;
    }
    a.l_dis, a.r_dis {
    background: transparent; /* ALWAYS leave transparent. this is the 'disabled' state of the link !  */
    cursor: default;
    }
    a.l_dis span, a.r_dis span {
    visibility: hidden;
    }
    a:focus {outline:none;}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,289
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's a bit awkward without changing the html.

    You could do something like this but it does depend that you are using the same heights throughout.

    Code:
    .slideViewer span.typo{margin-top:486px!important;}
    .slideViewer{height:520px!important}
    #svwp0>div{overflow:visible!important}
    #thumbSlider0{margin-top:-100px!important}
    You can't move the text because the parent is set to overflow;hidden so as soon as you try to move it out of the area it will be hidden. Therefore you have to increase the parents height and then you can move the text downwards and then drag the thumbnails up into that space.

    It's a bit convoluted and are you sure the caption wouldn't be better on the image?

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It's a bit convoluted and are you sure the caption wouldn't be better on the image?
    I second this.

    Also the problem with premade sliders is that they are not as easy to to customize as you may have been lead to believe. In this case, for example the slider generates the markup.. and even puts INLINE CSS. So you might as well dig into the jquery script to customize it (by this point you need to know jquery/js and be comfortable enough to deal with someone else's code) :/

    anyway:

    this SHOULD do the basic trick...

    use this as your sliderPro .js file
    Code:
    /*!
     * slideViewerPro 1.5
     * Examples and documentation at: 
     * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/
     * 2009-2011 Gian Carlo Mingati
     * Version: 1.5.0 (02-AUG-2011)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     * Requires:
     * jQuery v1.6 or later
     * Option:
     * jQuery Timers plugin | plugins.jquery.com/project/timers (for autoslide mode)
     * Updated by: Ray Messina 
     * http://raym31.home.comcast.net 
     * 
     */
    jQuery.extend( jQuery.easing, // from the jquery.easing plugin
    {
    	easeInOutExpo: function (x, t, b, c, d) {
    		if (t==0) return b;
    		if (t==d) return b+c;
    		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
    	}
    });
    jQuery(function(){
       jQuery("div.svwp").prepend("<img src='images/svwloader.gif' class='ldrgif' alt='loading...'/ >"); //change with YOUR loader image path   
    });
    var j = 0;
     jQuery.fn.slideViewerPro = function(settings) {
    	$("#my-folio-of-works").after("<div id='typeout'></div>"); /// added by ray messina
    	  settings = jQuery.extend({
    			galBorderWidth: 6,
    			thumbsTopMargin: 3, 
    			thumbsRightMargin: 3,
    			thumbsBorderWidth: 3,
    			buttonsWidth: 20,
    			galBorderColor: "#ff0000",
    			thumbsBorderColor: "#d8d8d8",
    			thumbsActiveBorderColor: "#ff0000",
    			buttonsTextColor: "#ff0000",
    			thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
    			thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
    			easeTime: 750,
    			asTimer: 4000,
    			thumbs: 5,
    			thumbsPercentReduction: 12,
    			thumbsVis: true,
    			easeFunc: "easeInOutExpo",
    			leftButtonInner: "-", //could be an image "<img src='images/larw.gif' />" or an escaped char as "&larr";
    			rightButtonInner: "+", //could be an image or an escaped char as "&rarr";
    			autoslide: false,
    			typo: false,
    			outside: false,
    			typoFullOpacity: 0.9,
    			shuffle: false
    		}, settings);
    		
    	return this.each(function(){
    		function shuffle(a) {
    	    var i = a.size();
    	    while (--i) {
    	        var j = Math.floor(Math.random() * (i));
    	        var tmp = a.slice(i, i+1);
    	        a.slice(j, j+1).insertAfter(tmp);
    	    }
    		} 
    		var container = jQuery(this);
    		(!settings.shuffle) ? null : shuffle(container.find("li"));
    		container.find("img.ldrgif").remove();
    		container.removeClass("svwp").addClass("slideViewer");	
    		container.attr("id", "svwp"+j);
    		/**
    			var pictWidth = container.find("img").width(); 
    			Reads the width of the first (and only) IMG height. 
    			That's why all images in the gal must have the same width/height
    		*/
    		var pictWidth = container.find("img").width(); 
    		var pictHeight = container.find("img").height();
    		var pictEls = container.find("li").size();
    		(pictEls >= settings.thumbs) ? null : settings.thumbs = pictEls;
    		var slideViewerWidth = pictWidth*pictEls;
    		var thumbsWidth = Math.round(pictWidth*settings.thumbsPercentReduction/100);
    		var thumbsHeight =  Math.round(pictHeight*settings.thumbsPercentReduction/100);
    		var pos = 0;
    		var r_enabled = true;
    		var l_enabled = true;
        container.find("ul").css("width" , slideViewerWidth)
        .wrap(jQuery("<div style='width:"+ pictWidth +"px; overflow: hidden; position: relative; top: 0; left: 0'>"));
    		container.css("width" , pictWidth);
    		container.css("height" , pictHeight);
    		container.each(function(i) {
    			if(settings.typo)
    			{ 
    				c=0;																//added by ray messina
    			jQuery(this).find("img").each(function(z) {
    				jQuery(this).after("<span class='typo' style='position: absolute; width:"+(pictWidth-12)+"px; margin: 0 0 0 -"+pictWidth+"px'>"+jQuery(this).attr("alt")+"<\/span>");
    				if (settings.outside && c==0){	$('#typeout').html(this.alt);  c++}	 	//added by ray messina	
     			});
    			}
    			jQuery(this).after("<div class='thumbSlider' id='thumbSlider" + j + "'><ul><\/ul><\/div>");
    			jQuery(this).next().after("<a href='#' class='left' id='left" + j + "'><span>"+settings.leftButtonInner+"</span><\/a><a href='#' class='right' id='right" + j + "'><span>"+settings.rightButtonInner+"<\/span><\/a>");
    			
    			jQuery(this).find("li").each(function(n) { 
    						jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' alt='" + jQuery(this).find("img").attr("alt") + "'/><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");	//altered by ray messina				
    			});
        
    			jQuery("div#thumbSlider" + j + " a").each(function(z) {			
    				jQuery(this).bind("click", function(){
    					jQuery(this).find("p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
    					jQuery(this).parent().parent().find("p.tmbrdr").not(jQuery(this).find("p.tmbrdr")).css({borderColor: settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});
    					var cnt = -(pictWidth*z);
    					(cnt != container.find("ul").css("left").replace(/px/, "")) ? container.find("span.typo").animate({"opacity": 0}, 250) : null ;
    					container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc, function(){container.find("span.typo").animate({"opacity": settings.typoFullOpacity}, 250)});	
    					if (settings.outside){							 				//added by ray messina	
    						txt=$(this).find("img").attr('alt');						//added by ray messina
    						$('#typeout').html(txt); 	 								//added by ray messina			
     					} 												 				//added by ray messina			
    					return false;
    				});
    			});
    			// shortcuts to +/- buttons
    			var jQuerybtl = jQuery("a#left" + j);	
    			var jQuerybtr = jQuery("a#right" + j);	
    			
    			// right/left 			
    			jQuerybtr.bind("click", function(){
    					if (r_enabled) (pictEls-pos > settings.thumbs*2 || pictEls%settings.thumbs == 0)? pos += settings.thumbs : pos += pictEls % settings.thumbs;
    					r_enabled = false;
    					jQuery(this).prev().prev().find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();});					
    					return false;
    			});
    			jQuerybtl.bind("click", function(){	
    					if (l_enabled && pos!=0) (pictEls-pos > settings.thumbs || pictEls%settings.thumbs == 0)? pos -= settings.thumbs : pos -= pictEls % settings.thumbs;
    					l_enabled = false;
    					jQuery(this).prev().find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();});			
    					return false;
    			});						
    			
    			function authorityMixing()
    			{				
    				
    				//right btt
    				(pos == pictEls-settings.thumbs) ? jQuerybtr.addClass("r_dis") : jQuerybtr.removeClass("r_dis");
    				(pos == pictEls-settings.thumbs) ? r_enabled = false : r_enabled = true;
    				//left btt
    				(pos == 0) ? jQuerybtl.addClass("l_dis") : jQuerybtl.removeClass("l_dis");
    				(pos == 0) ? l_enabled = false : l_enabled = true;
    			}
    			
    			//CSS	defs @ runtime
    			var tBorder = settings.thumbsBorderWidth;
    			var contBorder = settings.galBorderWidth
    			
    			jQuery(".slideViewer a img").css({border: "0"});
    			if(settings.typo)
    					{
    						jQuery(this).find("span.typo").each(function(z) {
    							jQuery(this).css({marginTop: (pictHeight-jQuery(this).innerHeight()), opacity: settings.typoFullOpacity});
    						});
    					}
    			jQuery("div#svwp"+ j).css({border: settings.galBorderWidth +"px solid "+settings.galBorderColor});
    			
    			jQuery("div#thumbSlider" + j).css({position: "relative", left: contBorder, top: settings.thumbsTopMargin+"px", width: settings.thumbs*thumbsWidth+((settings.thumbsRightMargin*settings.thumbs)-settings.thumbsRightMargin), height: thumbsHeight, textAlign: "center", overflow: "hidden", margin: "0 auto"});
    			jQuery("div#thumbSlider" + j + " ul").css({width: (thumbsWidth*pictEls)+settings.thumbsRightMargin*pictEls, position: "relative", left: "0", top: "0"});
    			jQuery("div#thumbSlider" + j + " ul li").css({marginRight: settings.thumbsRightMargin});
    					
    			jQuery("div#thumbSlider" + j).find("p.tmbrdr").css({width: (thumbsWidth-tBorder*2)+"px", height: (thumbsHeight-tBorder*2) +"px", top: -(thumbsHeight) +"px", border: settings.thumbsBorderWidth +"px solid "+settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});			
    			jQuery("div#thumbSlider" + j + " a:first p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
    			
    			var rbttLeftMargin = (pictWidth/2) + (jQuery("div#thumbSlider" + j).width()/2) + settings.thumbsRightMargin + contBorder;
    			var lbttLeftMargin = (pictWidth/2) - (jQuery("div#thumbSlider" + j).width()/2) - (settings.buttonsWidth + settings.thumbsRightMargin) + contBorder;			
    
    			
    			var innerLeftImg = jQuerybtl.find("img");
    			var innerRightImg = jQuerybtr.find("img");
    			if(innerLeftImg.length != 0 && innerRightImg.length != 0)
    			{		
    				jQuery(innerLeftImg).load(function() {
    					jQuery(this).css({margin: Math.round((thumbsHeight/2)-(jQuery(this).height()/2))+"px 0 0 0"});
    				});				
    				jQuery(innerRightImg).load(function() {
    					jQuery(this).css({margin: Math.round((thumbsHeight/2)-(jQuery(this).height()/2))+"px 0 0 0"});
    				});			
    			}
    
    			
    			jQuery("a#left" + j).css({display: "block", textAlign: "center", width: settings.buttonsWidth + "px" , height: thumbsHeight+"px",  margin: -(thumbsHeight-settings.thumbsTopMargin) +"px 0 0 "+lbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});
    			jQuery("a#right" + j).css({display: "block", textAlign: "center", width: settings.buttonsWidth + "px", height: thumbsHeight+"px" , margin: -(thumbsHeight) +"px 0 0 "+rbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});			
    
    
    			authorityMixing();
    	
    			if(settings.autoslide){					
    					var i = 1;
    					
    					jQuery("div#thumbSlider" + j).everyTime(settings.asTimer, "asld", function() {			
    		  			jQuery(this).find("a").eq(i).trigger("click");
    		  			if(i == 0)
    		  			{
    						pos = 0;
    						l_enabled = false;
    						jQuery("div#thumbSlider" + j).find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();});
    		  			}
    		  			else l_enabled = true;
    		  			
    						(i%settings.thumbs == 0)? jQuery(this).next().next().trigger("click") : null;
    						(i < pictEls-1)?	i++ : i=0;		  			
    					});
    					
    							
    					//stops autoslidemode	
    					jQuery("a#right" + j).bind("mouseup", function(){
    						jQuery(this).prev().prev().stopTime("asld");
    		    	});
    					jQuery("a#left" + j).bind("mouseup", function(){
    						jQuery(this).prev().stopTime("asld");	
    					});
    					jQuery("div#thumbSlider" + j + " a").bind("mouseup", function(){
    						jQuery(this).parent().parent().parent().stopTime("asld");
    					});
    			}
    			var uiDisplay = (settings.thumbsVis)? "block":"none";
    			jQuery("div#thumbSlider" + j + ", a#left" + j + ", a#right" + j).wrapAll("<div style='width:"+ pictWidth +"px; display: "+uiDisplay+"' id='ui"+j+"'><\/div>");			
    			jQuery("div#svwp"+ j + ", div#ui" + j).wrapAll("<div style='width:"+ pictWidth +"px'><\/div>");
    			});
    			(jQuery("div#thumbSlider" + j).width()+(settings.buttonsWidth*2) >= pictWidth)? alert("ALERT: THE THUMBNAILS SLIDER IS TOO WIDE! \nthumbsPercentReduction and/or buttonsWidth needs to be scaled down!") : null;
    		j++;
       });	
    };

    updated settings
    Code:
    $(window).bind("load", function() {
        $("#my-folio-of-works").slideViewerPro({
            thumbs: 6, 
            autoslide: true, 
            asTimer: 3500, 
            typo: true,
            outside: true,					//added by ray messina
            galBorderWidth: 0,
            thumbsBorderOpacity: 0, 
            buttonsTextColor: "#707070",
            buttonsWidth: 40,
            thumbsActiveBorderOpacity: 0.8,
            thumbsActiveBorderColor: "aqua",
            shuffle: true
        });
    });
    PS
    you can style the outside caption in your css with #typeout{...}


Bookmarks

Posting Permissions

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