Title: [Plugin: WordPress Content Slide] No Image Repeat
Last modified: August 19, 2016

---

# [Plugin: WordPress Content Slide] No Image Repeat

 *  [DeBing](https://wordpress.org/support/users/debing/)
 * (@debing)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/plugin-wordpress-content-slide-dynamic-height-width/)
 * Hello first at all, thank you for this great plugin, but i have a question about
   it.
 * Is it possible to disable the repeat of an image in the Content Slide Box? I 
   mean the it remembers to the html background repeat both behaviour but i only
   want to show an image only once in the center of the box.
 * Greets

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Thread Starter [DeBing](https://wordpress.org/support/users/debing/)
 * (@debing)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/plugin-wordpress-content-slide-dynamic-height-width/#post-1713363)
 * Problem solved, fixed it by editing the coin-slider.js.
 *  [isengrim_](https://wordpress.org/support/users/isengrim_/)
 * (@isengrim_)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-content-slide-dynamic-height-width/#post-1713699)
 * Hi,
    Please could you post a description on how this can be achieved?
 * Regards,
    is
 *  Thread Starter [DeBing](https://wordpress.org/support/users/debing/)
 * (@debing)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-content-slide-dynamic-height-width/#post-1713700)
 * I’ve edited the coin-slider.js and set all background-repeat to no-repeat and
   sets the image to center position:
 *     ```
       /**
        * Coin Slider - Unique jQuery Image Slider
        * @version: 1.0 - (2010/04/04)
        * @requires jQuery v1.2.2 or later
        * @author Ivan Lazarevic
        * Examples and documentation at: http://workshop.rs/projects/coin-slider/
   
        * Licensed under MIT licence:
        *   http://www.opensource.org/licenses/mit-license.php
       **/
   
       (function($) {
   
       	var params 		= new Array;
       	var order		= new Array;
       	var images		= new Array;
       	var links		= new Array;
       	var linksTarget = new Array;
       	var titles		= new Array;
       	var interval	= new Array;
       	var imagePos	= new Array;
       	var appInterval = new Array;
       	var squarePos	= new Array;
       	var reverse		= new Array;
   
       	$.fn.coinslider= $.fn.CoinSlider = function(options){
   
       		init = function(el){
   
       			order[el.id] 		= new Array();	// order of square appereance
       			images[el.id]		= new Array();
       			links[el.id]		= new Array();
       			linksTarget[el.id]	= new Array();
       			titles[el.id]		= new Array();
       			imagePos[el.id]		= 0;
       			squarePos[el.id]	= 0;
       			reverse[el.id]		= 1;						
   
       			params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
   
       			// create images, links and titles arrays
       			$.each($('#'+el.id+' img'), function(i,item){
       				images[el.id][i] 		= $(item).attr('src');
       				links[el.id][i] 		= $(item).parent().is('a') ? $(item).parent().attr('href') : '';
       				linksTarget[el.id][i] 	= $(item).parent().is('a') ? $(item).parent().attr('target') : '';
       				titles[el.id][i] 		= $(item).next().is('span') ? $(item).next().html() : '';
       				$(item).hide();
       				$(item).next().hide();
       			});			
   
       			// set panel
       			$(el).css({
       				'background-image':'url('+images[el.id][0]+')',
       				'width': params[el.id].width,
       				'height': params[el.id].height,
       				'position': 'relative',
       				'background-repeat': 'no-repeat',
       				'background-color': 'black',
       				'background-position': 'center center'
       			}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");	
   
       			// create title bar
       			$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
   
       			$.setFields(el);
   
       			if(params[el.id].navigation)
       				$.setNavigation(el);
   
       			$.transition(el,0);
       			$.transitionCall(el);
   
       		}
   
       		// squares positions
       		$.setFields = function(el){
   
       			tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
       			tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
   
       			counter = sLeft = sTop = 0;
       			tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
       			tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
   
       			for(i=1;i <= params[el.id].sph;i++){
       				gapx = tgapx;
   
       					if(gapy > 0){
       						gapy--;
       						sHeight = tHeight+1;
       					} else {
       						sHeight = tHeight;
       					}
   
       				for(j=1; j <= params[el.id].spw; j++){	
   
       					if(gapx > 0){
       						gapx--;
       						sWidth = tWidth+1;
       					} else {
       						sWidth = tWidth;
       					}
   
       					order[el.id][counter] = i+''+j;
       					counter++;
   
       					if(params[el.id].links)
       						$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");
       					else
       						$('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");
   
       					// positioning squares
       					$("#cs-"+el.id+i+j).css({
       						'background-position': -sLeft +'px '+(-sTop+'px'),
       						'left' : sLeft ,
       						'top': sTop
       					});
   
       					sLeft += sWidth;
       				}
   
       				sTop += sHeight;
       				sLeft = 0;					
   
       			}
   
       			$('.cs-'+el.id).mouseover(function(){
       				$('#cs-navigation-'+el.id).show();
       			});
   
       			$('.cs-'+el.id).mouseout(function(){
       				$('#cs-navigation-'+el.id).hide();
       			});	
   
       			$('#cs-title-'+el.id).mouseover(function(){
       				$('#cs-navigation-'+el.id).show();
       			});
   
       			$('#cs-title-'+el.id).mouseout(function(){
       				$('#cs-navigation-'+el.id).hide();
       			});	
   
       			if(params[el.id].hoverPause){
       				$('.cs-'+el.id).mouseover(function(){
       					params[el.id].pause = true;
       				});
   
       				$('.cs-'+el.id).mouseout(function(){
       					params[el.id].pause = false;
       				});	
   
       				$('#cs-title-'+el.id).mouseover(function(){
       					params[el.id].pause = true;
       				});
   
       				$('#cs-title-'+el.id).mouseout(function(){
       					params[el.id].pause = false;
       				});
       			}
   
       		};
   
       		$.transitionCall = function(el){
   
       			clearInterval(interval[el.id]);
       			delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
       			interval[el.id] = setInterval(function() { $.transition(el)  }, delay);
   
       		}
   
       		// transitions
       		$.transition = function(el,direction){
   
       			if(params[el.id].pause == true) return;
   
       			$.effect(el);
   
       			squarePos[el.id] = 0;
       			appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]])  },params[el.id].sDelay);
   
       			$(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')', 'background-color': 'black', 'background-repeat': 'no-repeat', 'background-position': 'center center' });
   
       			if(typeof(direction) == "undefined")
       				imagePos[el.id]++;
       			else
       				if(direction == 'prev')
       					imagePos[el.id]--;
       				else
       					imagePos[el.id] = direction;
   
       			if  (imagePos[el.id] == images[el.id].length) {
       				imagePos[el.id] = 0;
       			}
   
       			if (imagePos[el.id] == -1){
       				imagePos[el.id] = images[el.id].length-1;
       			}
   
       			$('.cs-button-'+el.id).removeClass('cs-active');
       			$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');
   
       			if(titles[el.id][imagePos[el.id]]){
       				$('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
       				$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
       			} else {
       				$('#cs-title-'+el.id).css('opacity',0);
       			}				
   
       		};
   
       		$.appereance = function(el,sid){
   
       			$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);
   
       			if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
       				clearInterval(appInterval[el.id]);
       				return;
       			}
   
       			$('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+') ', 'background-color': 'black', 'background-repeat': 'no-repeat', 'background-position': 'center center' });
       			$('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
       			squarePos[el.id]++;
   
       		};
   
       		// navigation
       		$.setNavigation = function(el){
       			// create prev and next
       			$(el).append("<div id='cs-navigation-"+el.id+"'></div>");
       			$('#cs-navigation-'+el.id).hide();
   
       			$('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'><</a>");
       			$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>></a>");
       			$('#cs-prev-'+el.id).css({
       				'position' 	: 'absolute',
       				'top'		: params[el.id].height/2 - 15,
       				'left'		: 0,
       				'z-index' 	: 1001,
       				'line-height': '30px',
       				'opacity'	: params[el.id].opacity
       			}).click( function(e){
       				e.preventDefault();
       				$.transition(el,'prev');
       				$.transitionCall(el);
       			}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
   
       			$('#cs-next-'+el.id).css({
       				'position' 	: 'absolute',
       				'top'		: params[el.id].height/2 - 15,
       				'right'		: 0,
       				'z-index' 	: 1001,
       				'line-height': '30px',
       				'opacity'	: params[el.id].opacity
       			}).click( function(e){
       				e.preventDefault();
       				$.transition(el);
       				$.transitionCall(el);
       			}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
   
       			// image buttons
       			$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));
   
       			for(k=1;k<images[el.id].length+1;k++){
       				$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");
       			}
   
       			$.each($('.cs-button-'+el.id), function(i,item){
       				$(item).click( function(e){
       					$('.cs-button-'+el.id).removeClass('cs-active');
       					$(this).addClass('cs-active');
       					e.preventDefault();
       					$.transition(el,i);
       					$.transitionCall(el);
       				})
       			});	
   
       			$('#cs-navigation-'+el.id+' a').mouseout(function(){
       				$('#cs-navigation-'+el.id).hide();
       				params[el.id].pause = false;
       			});						
   
       			$("#cs-buttons-"+el.id).css({
       				'left'			: '50%',
       				'margin-left' 	: -images[el.id].length*15/2-5,
       				'position'		: 'relative'
   
       			});
   
       		}
   
       		// effects
       		$.effect = function(el){
   
       			effA = ['random','swirl','rain','straight'];
       			if(params[el.id].effect == '')
       				eff = effA[Math.floor(Math.random()*(effA.length))];
       			else
       				eff = params[el.id].effect;
   
       			order[el.id] = new Array();
   
       			if(eff == 'random'){
       				counter = 0;
       				  for(i=1;i <= params[el.id].sph;i++){
       				  	for(j=1; j <= params[el.id].spw; j++){
       				  		order[el.id][counter] = i+''+j;
       						counter++;
       				  	}
       				  }
       				$.random(order[el.id]);
       			}
   
       			if(eff == 'rain')	{
       				$.rain(el);
       			}
   
       			if(eff == 'swirl')
       				$.swirl(el);
   
       			if(eff == 'straight')
       				$.straight(el);
   
       			reverse[el.id] *= -1;
       			if(reverse[el.id] > 0){
       				order[el.id].reverse();
       			}
   
       		}
   
       		// shuffle array function
       		$.random = function(arr) {
   
       		  var i = arr.length;
       		  if ( i == 0 ) return false;
       		  while ( --i ) {
       		     var j = Math.floor( Math.random() * ( i + 1 ) );
       		     var tempi = arr[i];
       		     var tempj = arr[j];
       		     arr[i] = tempj;
       		     arr[j] = tempi;
       		   }
       		}	
   
       		//swirl effect by milos popovic
       		$.swirl = function(el){
   
       			var n = params[el.id].sph;
       			var m = params[el.id].spw;
   
       			var x = 1;
       			var y = 1;
       			var going = 0;
       			var num = 0;
       			var c = 0;
   
       			var dowhile = true;
   
       			while(dowhile) {
   
       				num = (going==0 || going==2) ? m : n;
   
       				for (i=1;i<=num;i++){
   
       					order[el.id][c] = x+''+y;
       					c++;
   
       					if(i!=num){
       						switch(going){
       							case 0 : y++; break;
       							case 1 : x++; break;
       							case 2 : y--; break;
       							case 3 : x--; break;
   
       						}
       					}
       				}
   
       				going = (going+1)%4;
   
       				switch(going){
       					case 0 : m--; y++; break;
       					case 1 : n--; x++; break;
       					case 2 : m--; y--; break;
       					case 3 : n--; x--; break;
       				}
   
       				check = $.max(n,m) - $.min(n,m);
       				if(m<=check && n<=check)
       					dowhile = false;
   
       			}
       		}
   
       		// rain effect
       		$.rain = function(el){
       			var n = params[el.id].sph;
       			var m = params[el.id].spw;
   
       			var c = 0;
       			var to = to2 = from = 1;
       			var dowhile = true;
   
       			while(dowhile){
   
       				for(i=from;i<=to;i++){
       					order[el.id][c] = i+''+parseInt(to2-i+1);
       					c++;
       				}
   
       				to2++;
   
       				if(to < n && to2 < m && n<m){
       					to++;
       				}
   
       				if(to < n && n>=m){
       					to++;
       				}
   
       				if(to2 > m){
       					from++;
       				}
   
       				if(from > to) dowhile= false;
   
       			}			
   
       		}
   
       		// straight effect
       		$.straight = function(el){
       			counter = 0;
       			for(i=1;i <= params[el.id].sph;i++){
       				for(j=1; j <= params[el.id].spw; j++){
       					order[el.id][counter] = i+''+j;
       					counter++;
       				}
   
       			}
       		}
   
       		$.min = function(n,m){
       			if (n>m) return m;
       			else return n;
       		}
   
       		$.max = function(n,m){
       			if (n<m) return m;
       			else return n;
       		}		
   
       	this.each (
       		function(){ init(this); }
       	);
   
       	};
   
       	// default values
       	$.fn.coinslider.defaults = {
       		width: 565, // width of slider panel
       		height: 290, // height of slider panel
       		spw: 7, // squares per width
       		sph: 5, // squares per height
       		delay: 3000, // delay between images in ms
       		sDelay: 30, // delay beetwen squares in ms
       		opacity: 0.7, // opacity of title and navigation
       		titleSpeed: 500, // speed of title appereance in ms
       		effect: '', // random, swirl, rain, straight
       		navigation: true, // prev next and buttons
       		links : true, // show images as links
       		hoverPause: true // pause on hover
       	};	
   
       })(jQuery);
       ```
   
 * I don’t know if this file still works with the newer plugin updates, i run the
   content slide plugin only on the version 1.3.3
 *  [isengrim_](https://wordpress.org/support/users/isengrim_/)
 * (@isengrim_)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-content-slide-dynamic-height-width/#post-1713701)
 * Thanks for a quick response. I will try to apply these changes later in the afternoon.
 * Regards,
    isengrim
 *  [Lord Acuña](https://wordpress.org/support/users/lordxtina/)
 * (@lordxtina)
 * [15 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-content-slide-dynamic-height-width/#post-1713711)
 * I tried that code but still not working, buddy. 🙁 Can you provide a link to 
   your gallery?
 *  [Amelia Rose](https://wordpress.org/support/users/shawnrisk/)
 * (@shawnrisk)
 * [15 years ago](https://wordpress.org/support/topic/plugin-wordpress-content-slide-dynamic-height-width/#post-1713784)
 * You just have to add background-repat: no-repeat to wherever that is added in
   the code above.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘[Plugin: WordPress Content Slide] No Image Repeat’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/content-slide.svg)
 * [Wordpress Content Slide](https://wordpress.org/plugins/content-slide/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/content-slide/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/content-slide/)
 * [Active Topics](https://wordpress.org/support/plugin/content-slide/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/content-slide/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/content-slide/reviews/)

 * 6 replies
 * 4 participants
 * Last reply from: [Amelia Rose](https://wordpress.org/support/users/shawnrisk/)
 * Last activity: [15 years ago](https://wordpress.org/support/topic/plugin-wordpress-content-slide-dynamic-height-width/#post-1713784)
 * Status: not resolved