You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 01-02-2014 18:22:15

thomashoeller
Contributors
Registered: 12-12-2013
Posts: 10

Width of tile slidefx -->3

Hi,
I would like to use the tile type slidefx (the one that folds on hover) with a width of 3 tiles.
Seems that just changing the width attribute to 3 is not enough. The image is not extended to 3 tiles.
What do I need to change, too?

Thanks
Thomas

Offline

#2 10-02-2014 11:08:42

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Width of tile slidefx -->3

Yea some css things must be changed.

First, the image you use must be exact 455x145px

and then copy paste this into

plugins/tileslidefx/plugin.css

.tileSlideFx>.slideText {
	width: 30%; /*area available for text */
}
.tileSlideFx .s2, 
.tileSlideFx .s3,
.tileSlideFx .s4 {
	margin-left:114px;
}
.tileSlideFx .s1 {
	background-position: 0px 0px;
}
.tileSlideFx .s2 {
	background-position: -114px 0px;
}
.tileSlideFx .s3 {
	background-position: -228px 0px;
}
.tileSlideFx .s4 {
	background-position: -342px 0px;
}
/* DO NOT CHANGE */
.tileSlideFx{
	-moz-perspective: 500px;
}
.tileSlideFx.hovered{
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	-ms-perspective: 500px;
	perspective: 500px;
	overflow:visible;
}
.tileSlideFx .slice{
	width: 75px;
	height: 100%;
	z-index: 10;	
	outline: 1px solid transparent;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
}
.tileSlideFx.hovered .slice{
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;	
	-ms-transition: -ms-transform 200ms;	
	-webkit-transition: -webkit-transform 200ms;	
	-o-transition: -o-transform 200ms;	
	-moz-transition: -moz-transform 200ms;	
	transition: transform 200ms;
}
.tileSlideFx>.slideText {
	position: absolute;
	right: 0;	height: 100%;
	display: block;
	float: right;
	padding: 5px 20px 5px;
	text-align: right;
	font-size: 16px;
	z-index: 0;
}
.tileSlideFx .overlay {
	width: 75px; 
	height: 100%;
	opacity: 0;
	position: absolute;	
}
.tileSlideFx:hover .overlay {
	opacity: 1;
}
.tileSlideFx>.imgWrapper{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}
.tileSlideFx img {
	position: absolute;
	z-index:1;
}
.tileSlideFx .overlay{
	-webkit-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-o-transition: opacity 200ms;
	-ms-transition: opacity 200ms;
	transition: opacity 200ms;
}
.tileSlideFx.hovered:hover .s2{
	z-index:101;
	margin-left:113px;
	-webkit-transform: rotate3d(0,1,0,-63deg);
	-moz-transform:  rotate3d(0,1,0,-63deg);
	-o-transform:  rotate3d(0,1,0,-63deg);
	-ms-transform:  rotate3d(0,1,0,-63deg);
	transform:  rotate3d(0,1,0,-63deg);
}
.tileSlideFx.hovered:hover .s3{
	z-index:101;
	margin-left:113px;
	-webkit-transform:  rotate3d(0,1,0,126deg);
	-moz-transform:  rotate3d(0,1,0,126deg);
	-o-transform:  rotate3d(0,1,0,126deg);
	-ms-transform:  rotate3d(0,1,0,126deg);
	transform:  rotate3d(0,1,0,126deg);
}
.tileSlideFx.hovered:hover .s4{
	z-index:101;
	margin-left:113px;
	-webkit-transform:  rotate3d(0,1,0,-126deg);
	-moz-transform:  rotate3d(0,1,0,-126deg);
	-o-transform:  rotate3d(0,1,0,-126deg);
	-ms-transform:  rotate3d(0,1,0,-126deg);
	transform:  rotate3d(0,1,0,-126deg);
}
.tileSlideFx.hovered .s1 > .overlay {
	background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.tileSlideFx.hovered .s2 > .overlay {
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.tileSlideFx.hovered .s3 > .overlay {
	background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}
.tileSlideFx.hovered .s4 > .overlay {
	background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

Offline

#3 11-02-2014 10:29:11

thomashoeller
Contributors
Registered: 12-12-2013
Posts: 10

Re: Width of tile slidefx -->3

Great, thanks.
There is, however a vertical line between the slices.
http://www.q-eye-t.com/new/.

Maybe this is related to my slice-tile-problem....

Thanks,
Thomas

Offline

#4 11-02-2014 10:58:09

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Width of tile slidefx -->3

Is it fixed when you copy paste this into plugins/tileslidefx/plugin.js?

/* Plugin JS file */
if(($.browser.name=="msie" && $.browser.version<11 ) || $.browser.name=="opera"){ // if notIE
	$(document).on("mouseenter",".tileSlideFx",function(){
		$(this).children('.imgWrapper').stop().animate({"margin-left":-$(this).width()*0.4},500);
	}).on("mouseleave",".tileSlideFx",function(){
		$(this).children('.imgWrapper').stop().animate({"margin-left":0},500);
	})
}else{
	$(document).on("mouseenter",".tileSlideFx",function(){
		$(this).addClass("hovered");
		clearTimeout(timers[$(this)]);
	}).on("mouseleave",".tileSlideFx",function(){
		timers[$(this)] = setTimeout(function(){$(".tileSlideFx").removeClass("hovered")},201);
	})
	
}
$.plugin($siteLoad,{
	tileSlideFx:function(){
		if(($.browser.name!="msie" || ($.browser.name=="msie" && $.browser.version>10)) && $.browser.name!="opera"){
			$(".tileSlideFx").each( function() {
          		var $item 	= $( this ),
				    itemwidth = $item.width(),
					img		= $item.find('img').attr( 'src' ),
					struct	= '<div class="slice s1">\
					<div class="slice s2"  style="background-position: -'+Math.ceil(itemwidth*0.25)+'px 0px;">\
					<div class="slice s3" style="background-position: -'+Math.ceil(itemwidth*0.5)+'px 0px;">\
					<div class="slice s4" style="background-position:-'+Math.ceil(itemwidth*0.75)+'px 0px;">\
					</div></div></div></div>';
				$item.children('.imgWrapper').remove().end()
					.append(struct)
					.find('.slice').css("width", Math.ceil(itemwidth*0.25)).css( 'background-image','url('+img+')')
					.prepend('<span class="overlay" style="width:'+Math.ceil(itemwidth*0.25)+'px;"></span>')

        	});  
		}else{
			$(".tileSlideFx").css("overflow","hidden");
		}
	}
});

Offline

#5 11-02-2014 12:48:12

thomashoeller
Contributors
Registered: 12-12-2013
Posts: 10

Re: Width of tile slidefx -->3

Yes, great work!
Thanks
Thomas

Offline

Board footer

Powered by FluxBB