Help for slidin background
tayfuntt, 2011. Jun 05. Sun, 16:27
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
Re: Help for slidin background
fizi, 2011. Jun 05. Sun, 18:19
You inserted the js into the function theme_head() - theme.php file?
Re:
Help for slidin background
tayfuntt, 2011. Jun 05. Sun, 21:07
function theme_head(){
return "<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="supersized.js"></script> \n";
}
like this
Re:
Help for slidin background
fizi, 2011. Jun 05. Sun, 23:15
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.
Re:
Help for slidin background
tayfuntt, 2011. Jun 07. Tue, 00:14
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
Re:
Help for slidin background
tayfuntt, 2011. Jun 07. Tue, 00:18
i couldnt attach
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>
Re:
Help for slidin background
fizi, 2011. Jun 07. Tue, 15:12
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.
Re: Help for slidin background
tayfuntt, 2011. Jun 07. Tue, 19:52
thx i ll try this