Fizi Themes
e107 Styles

Fórumok

Help for slidin background

Post a reply 
tayfuntt

tayfuntt
Level 1
12 years ago
Hi fizi , now i am working about sliding background pics with e107
i wanna use this jquery plugin
i try so many configuration plug this with e107 but something wrong it doesnt work
can you help me pls
in theme css use this code 
/*Supersize Plugin Styles*/  
    body {  
            overflow:hidden;  
    }  
    #supersize img, #supersize a{  
        height:100%;  
        width:100%;  
        display:none;  
    }  
    #supersize .activeslide, #supersize .activeslide img{  
        display:inline;  
    }
and at the theme.php i try to use it with div tag but always return with fault code
fizi

fizi
fizi
Main Admin
12 years ago
You inserted the js into the function theme_head() - theme.php file?
tayfuntt

tayfuntt
Level 1
12 years ago
function theme_head(){
	return "<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="supersized.js"></script> \n";
}


like this
fizi

fizi
fizi
Main Admin
12 years ago
2011. Jun 05. Sun, 23:19
You made wrong. Make the js folder in the theme folder and code insert into the theme.php: 
function theme_head() {
 echo "<script type='text/javascript' src='".THEME_ABS."js/jquery.js'></script>
       <script type='text/javascript' src='".THEME_ABS."js/supersized.js'></script>
";
 }
Insert and upload 2 .js file into the js folder. In this way the theme call the srcipts.
tayfuntt

tayfuntt
Level 1
12 years ago
thx fizi
still i try coz i wanna learn how to make i think i finished just theme head2 i changed header_default.php and add js code in head now my code like that
function theme_head2() {
	 echo "<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>       <script type='text/javascript' src='".THEME_ABS."js/supersized.3.1.3.min.js'></script>";
	 }
but still have problem i found html file and it works but i cant embed it in the theme.php
attach html file
thx for help
tayfuntt

tayfuntt
Level 1
12 years ago
i couldnt attach happy i forgot it
here the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<!--
		Supersized - Fullscreen Slideshow jQuery Plugin
		Version 3.1.3
		www.buildinternet.com/project/supersized
		
		By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
		Released under MIT License / GPL License
	-->

	<head>

		<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=8" />
		
		<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
		
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/supersized.3.1.3.min.js"></script>
		
		<script type="text/javascript">  
			
			jQuery(function($){
				$.supersized({
				
					//Functionality
					slideshow               :   1,		//Slideshow on/off
					autoplay				:	1,		//Slideshow starts playing automatically
					start_slide             :   1,		//Start slide (0 is random)
					random					: 	0,		//Randomize slide order (Ignores start slide)
					slide_interval          :   3000,	//Length between transitions
					transition              :   3, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed		:	700,	//Speed of transition
					new_window				:	1,		//Image links open in new window/tab
					pause_hover             :   0,		//Pause slideshow on hover
					keyboard_nav            :   1,		//Keyboard navigation on/off
					performance				:	1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
					image_protect			:	1,		//Disables image dragging and right click with Javascript
					image_path				:	'img/', //Default image path

					//Size & Position
					min_width		        :   0,		//Min width allowed (in pixels)
					min_height		        :   0,		//Min height allowed (in pixels)
					vertical_center         :   1,		//Vertically center background
					horizontal_center       :   1,		//Horizontally center background
					fit_portrait         	:   1,		//Portrait images will not exceed browser height
					fit_landscape			:   0,		//Landscape images will not exceed browser width
					
					//Components
					navigation              :   1,		//Slideshow controls on/off
					thumbnail_navigation    :   1,		//Thumbnail navigation
					slide_counter           :   1,		//Display slide numbers
					slide_captions          :   1,		//Slide caption (Pull from "title" in slides array)
					slides 					:  	[		//Slideshow Images
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day3-emily.jpg', title : 'Day 3 by Emily Tebbetts', url : 'http://www.nonsensesociety.com/2011/02/larissa/'},  
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/film-emily.jpg', title : 'Film by Emily Tebbetts', url : 'http://www.nonsensesociety.com/2011/02/larissa/'},  
														{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day2-emily.jpg', title : 'Day 2 by Emily Tebbetts', url : 'http://www.nonsensesociety.com/2011/02/larissa/'}  
												]
												
				}); 
		    });
		    
		</script>
		
		<style type="text/css">
		
			/*Demo Styles*/
			p{ padding:0 30px 30px 30px; color:#fff; font:11pt "Helvetica Neue", "Helvetica", Arial, sans-serif; text-shadow: #000 0px 1px 0px; line-height:200%; }
				p a{ font-size:10pt; text-decoration:none; outline: none; color:#ddd; background:#222; border-top:1px solid #333; padding:5px 8px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow: 0px 1px 1px #000; -webkit-box-shadow: 0px 1px 1px #000; box-shadow: 0px 1px 1px #000; }
					p a:hover{ background-color:#427cb4; border-color:#5c94cb; color:#fff; }
			h3{ padding:30px 30px 20px 30px; }
			
			#content{ position:absolute; top:50px; left:50px; background:#111; background:rgba(0,0,0,0.65); width:360px; text-align:left; }
			.stamp{ float: right; margin: 15px 30px 0 0;}
			
		</style>
		
	</head>

<body>		


	<div id="content">
		<h3><a href="http://www.buildinternet.com" ><img src="img/buildinternet-logo.png"/></a></h3>
		<p>
			Photography by Emily Tebbetts<br/>
			<a href="http://www.nonsensesociety.com/2010/12/emily-tebbetts-2/" alt="Nonsense Society" target="_blank">Nonsense Society</a>
			<a href="http://www.flickr.com/photos/emilytebbettsphotography/4660914113/" alt="Emily on Flickr" target="_blank">Flickr</a>
		</p>
	</div>

	<!--Thumbnail Navigation-->
	<div id="prevthumb"></div> <div id="nextthumb"></div>
	
	<!--Control Bar-->
	<div id="controls-wrapper">
		<div id="controls">
		
			<!--Slide counter-->
			<div id="slidecounter">
				<span class="slidenumber"></span>/<span class="totalslides"></span>
			</div>
			
			<!--Slide captions displayed here-->
			<div id="slidecaption"></div>
			
			<!--Navigation-->
			<div id="navigation">
				<img id="prevslide" src="img/back_dull.png"/><img id="pauseplay" src="img/pause_dull.png"/><img id="nextslide" src="img/forward_dull.png"/>
			</div>
			
			<!--Logo in bar-->
			<a href="http://www.buildinternet.com/project/supersized" class="stamp"><img src="img/supersized-logo.png"/></a>
			
		</div>
	</div>

</body>
</html>
fizi

fizi
fizi
Main Admin
12 years ago
I don't tried it, but I think this is work.
Download the both js file and put into the theme_folder/jsfolder. After this insert the codes into the theme.php file:
function theme_head() {
here the .js files
}

Insert the html codes into the $header and the stlye elements into the style file and insert the e107 page layout after this.
Give the page layuot position: absolute; top:0; into the style.css.

Sorry I don't have time make you the full theme, but it is help you.
tayfuntt

tayfuntt
Level 1
12 years ago
thx i ll try this
Post a reply 
Moderator(s): fizi