Wonder if anyone has had any luck getting either a full-screen, stretchy slideshow, or even a full-screen, stretchy background image on a homepage?

Thanks!
Todd

Stretchy slideshow on homepage is customization #20 here.

Originally Posted by jfriend Stretchy slideshow on homepage is customization #20 here.

Already have that working ( http://www.historytrekkershoppe.com ), but it doesn't go full screen - side to side, top to bottom. Unless I'm doing something wrong?

Originally Posted by tatteberry Already have that working ( http://www.historytrekkershoppe.com ), but it doesn't go full screen - side to side, top to bottom. Unless I'm doing something wrong?

You set maxW to 1000 so it won't go wider than that. It won't fill the entire screen. First, it fits into the space you've allotted it on your homepage. In your case, you have a header, a footer and have specified max width of 1000px.

Within those constraints (that you control), it will scale the slideshow as large as will fit without spilling over either edge. Unless the space for the slideshow in your browser window just happens to be exactly the same shape as your images, you will have some extra space either above/below or left/right of the slideshow. That's how it works. It doesn't stretch images non-uniformly to fill the entire space (and you would not want it to do that if you saw what that would look like).

What do you want it to do beyond what you have now?

What do you want it to do beyond what you have now?[/QUOTE]

For that site, the slideshow is fine. My original question is in regards to a flash site which a client wants to recreate on smugmug. He has a full-screen, single image background (no tiling), which scales according to the size of the browser. So I'm trying to find some way to get that same effect. Ideally it would just be a background image that stretches, but I don't believe Smugmug does that? So I was trying to find a way to do it via the slideshow which does stretch.

So in short, I need a background image which fills the entire screen (cutting off a bit off the sides is fine as the image is abstract), and stretches both up and down. I realize the image ratio will stay the same, which means cutting off the bottom in some browsers, which again is alright, and preferable to whacking out the original image ratio. I also have another client who wants the same type of background (full screen, edge to edge, stretchy), who wants the background images to swap out and act as a slideshow. The example they've shown me is HTML 5.0, which is over my head and I'm still a bit leery of implementing HTML 5.0 on their homepage, for lack of browser support.

I'm not sure either can be done, and after a couple days of trying, I thought I'd see if it's even possible (without going the 5.0) route before I end up banging my head here on the desk.

Originally Posted by tatteberry For that site, the slideshow is fine. My original question is in regards to a flash site which a client wants to recreate on smugmug. He has a full-screen, single image background (no tiling), which scales according to the size of the browser. So I'm trying to find some way to get that same effect. Ideally it would just be a background image that stretches, but I don't believe Smugmug does that? So I was trying to find a way to do it via the slideshow which does stretch. So in short, I need a background image which fills the entire screen (cutting off a bit off the sides is fine as the image is abstract), and stretches both up and down. I realize the image ratio will stay the same, which means cutting off the bottom in some browsers, which again is alright, and preferable to whacking out the original image ratio. I also have another client who wants the same type of background (full screen, edge to edge, stretchy), who wants the background images to swap out and act as a slideshow. The example they've shown me is HTML 5.0, which is over my head and I'm still a bit leery of implementing HTML 5.0 on their homepage, for lack of browser support. I'm not sure either can be done, and after a couple days of trying, I thought I'd see if it's even possible (without going the 5.0) route before I end up banging my head here on the desk.

The only way I know of to do the variable size background image is with scripting. There are some scripts out there (findable via Google) that do that. I haven't personally tried to adapt one to Smugmug.

Thanks for the info. I'll track some down and try those, once my frustration level dips to a more humane level.

Okay, so I found one that fills both of my needs. Tried following along with the directions as best as my feeble brain allows, but no go. Any chance you could take a look for any glaring mistakes?

The site is http://toddstestsite.smugmug.com/

I found the code here:
http://buildinternet.com/2009/02/sup...jquery-plugin/

I'm a designer by trade, and coding is as you can see, not really my bag. But I come from a good home and I try hard!

Originally Posted by tatteberry Okay, so I found one that fills both of my needs. Tried following along with the directions as best as my feeble brain allows, but no go. Any chance you could take a look for any glaring mistakes? The site is http://toddstestsite.smugmug.com/ I found the code here: http://buildinternet.com/2009/02/sup...jquery-plugin/ I'm a designer by trade, and coding is as you can see, not really my bag. But I come from a good home and I try hard!

I don't know this customization you're using or the jquery library that it's built on, but I can see two errors. The first two lines in your top javascript are causing script errors. Those lines have to go in your custom header, not in your top javascript.

I'm trying to get version 2 of Supersize (see link below) working on my site but haven't been having any luck. I've got the code working fine in a separate PHP/JS file combination but I must be plugging it into SmugMug wrong. Here's what I am doing:

1. Copy the contents of the Supersize .js file into the Top Javascript space.
2. Copy the CSS elements from the default.php in the Supersize package into the CSS space in sitewide customization.
3. Copy these external references to the custom header area:
"<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
<script type="text/javascript" src="supersized.2.0.js"></script>"
4. Add js with the variables as well as the custom div with the links to my photos in the bio with html tags.

I've tried different elements in different places but still can't seem to get it to work. I would love to hear what tatteberry did to get it working or would welcome any input. This is becoming a quest and I'm not going to sleep until I get it figured out.

My site is: http://bellefeuille.smugmug.com

Thanks,

Scott

Oops forgot link to Supersize 2: http://buildinternet.com/2009/05/sup...-and-controls/

Originally Posted by SBell I'm trying to get version 2 of Supersize (see link below) working on my site but haven't been having any luck. I've got the code working fine in a separate PHP/JS file combination but I must be plugging it into SmugMug wrong. Here's what I am doing: 1. Copy the contents of the Supersize .js file into the Top Javascript space. 2. Copy the CSS elements from the default.php in the Supersize package into the CSS space in sitewide customization. 3. Copy these external references to the custom header area: "<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script> <script type="text/javascript" src="supersized.2.0.js"></script>" 4. Add js with the variables as well as the custom div with the links to my photos in the bio with html tags. I've tried different elements in different places but still can't seem to get it to work. I would love to hear what tatteberry did to get it working or would welcome any input. This is becoming a quest and I'm not going to sleep until I get it figured out. My site is: http://bellefeuille.smugmug.com Thanks, Scott Oops forgot link to Supersize 2: http://buildinternet.com/2009/05/sup...-and-controls/

Well I got the slideshow partially working by putting all the Javascript in the bio box, but it isn't aligning correctly- the image doesn't stretch all the way to the left hand or top border of the browser. Is there some CSS code to tell the bio box to not have borders or to disappear basically?

Originally Posted by SBell Well I got the slideshow partially working by putting all the Javascript in the bio box, but it isn't aligning correctly- the image doesn't stretch all the way to the left hand or top border of the browser. Is there some CSS code to tell the bio box to not have borders or to disappear basically?

You can try adding this CSS at the end of your CSS and see if it helps:

#homepage, #bioBox, #bioBox. boxBottom, #userBio {width: auto !important; height: auto !important;}

I see you got it working. Sorry, I've been out most of the weekend. For navigation you can add a fixed bottom or top footer, as well as using the extradivs. These slideshows do take a while to load, so I'm trying to work in a way to get a splash screen to start with.

Thanks for the replies. I tried the CSS above and am still having a margin problem. It's got to be some CSS or something I need to add for the bio box. I can see the biobox itself stretches edge to edge but it seems like the content of the bio box, the slideshow, is picking up the margins or padding of the biobox picture or something....

Originally Posted by tatteberry These slideshows do take a while to load, so I'm trying to work in a way to get a splash screen to start with.

Supersize 2 has some loading js script & CSS built in. It points to an animated gif which I uploaded to my gallery and changed the url, but it would be easy enough to point it to a lightweight custom splash screen image in your gallery. See code below.

#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 3;
width: 24px;
height: 24px;
text-indent: -999em;
background-image: url(http://bellefeuille.smugmug.com/Othe..._PGx7X-O.gif);

Well I solved my margin problem by replacing this css code:

#supersize{position:fixed;}

With this:

#supersize{
height:100%;
width:100%;
display:none;
position: absolute;
top: 0;
left: 0;
}

The only problem is that it doesn't seem to work in Firefox on Mac- the slideshow is shifted to the right almost to the middle of the screen. It works perfectly in Safari Mac, IE in Windows XP, Opera Mac, and Chrome Mac.

Originally Posted by SBell Well I solved my margin problem by replacing this css code: #supersize{position:fixed;} With this: #supersize{ height:100%; width:100%; display:none; position: absolute; top: 0; left: 0; } The only problem is that it doesn't seem to work in Firefox on Mac- the slideshow is shifted to the right almost to the middle of the screen. It works perfectly in Safari Mac, IE in Windows XP, Opera Mac, and Chrome Mac.

Get rid of this CSS rule:

#bioBox, #userBio {text-align: center;}

Originally Posted by jfriend Get rid of this CSS rule: #bioBox, #userBio {text-align: center;}

Thank you sir you are genius! Works like a charm. Now I can start working on the inside of my site. This customization stuff can be addictive!

One final thing I need to resolve is how to make this css code apply only to the home page. The "overflow:hidden;" makes the scroll bars disappear throughout the site.

/*Supersize CSS*/
*{
margin:0;
padding:0;
}
img{
border:none;
}
body {
overflow:hidden;/*Needed to eliminate scrollbars*/
background:#000;
}


Thanks to all for the help,

Scott

Hi there,
I found this thread. I have been looking for this tip.
Now, I have just started re-customizing my site. But I forgot how.

Do you　mind telling me how.
I understand where should I copy and paste the code from the file into each section. But I need something more to change, which is URL directions and etc.


Thank you in advance.

Originally Posted by hamasin I found this thread. I have been looking for this tip. Now, I have just started re-customizing my site. But I forgot how. Do you mind telling me how. I understand where should I copy and paste the code from the file into each section. But I need something more to change, which is URL directions and etc.

I have no idea what you are trying to do. Please ask specific questions, and include a link to your smugmug site; the link in your contact does not work.

If you're asking about a full-screen slideshow for your homepage, see # 20 in the thread Collection of javascript customizations.

--- Denise

Thank you for reply.
I simply want to customize top page like SBell's site;
http://bellefeuille.smugmug.com.

As he described copy and paste the codes from Supersize.
But what I want to know is where should I change in the code, and what should I add in my Bio box.

He said
1. add .js file into into the Top Javascript space

/*
Supersized - Fullscreen Slideshow jQuery Plugin
By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
Version: supersized.2.0.js // Relase Date: 5/7/09
Website: www.buildinternet.com/project/supersized
Thanks to Aen for preloading, fade effect, & vertical centering
*/

(function($){

//Resize image on ready or resize
$.fn.supersized = function() {
$.inAnimation = false;
$.paused = false;
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);

$(window).bind("load", function(){
$('#loading').hide();
$('#supersize').fadeIn('fast');
$('#content').show();
if ($('#slideshow .activeslide').length == 0) $('#supersize a:first').addClass('activeslide');
if (options.slide_captions == 1) $('#slidecaption').html($('#supersize .activeslide').find('img').attr('title'));
if (options.navigation == 0) $('#navigation').hide();
//Slideshow
if (options.slideshow == 1){
if (options.slide_counter == 1){ //Initiate slide counter if active
$('#slidecounter .slidenumber').html(1);
$('#slidecounter .totalslides').html($("#supersize > *").size());
}
slideshow_interval = setInterval("nextslide()", options.slide_interval);
if (options.navigation == 1){ //Skip if no navigation
$('#navigation a').click(function(){
$(this).blur();
return false;
});
//Slide Navigation
$('#nextslide').click(function() {
if($.paused) return false; if($.inAnimation) return false;
clearInterval(slideshow_interval);
nextslide();
slideshow_interval = setInterval(nextslide, options.slide_interval);
return false;
});
$('#prevslide').click(function() {
if($.paused) return false; if($.inAnimation) return false;
clearInterval(slideshow_interval);
prevslide();
slideshow_interval = setInterval(nextslide, options.slide_interval);
return false;
});
$('#nextslide img').hover(function() {
if($.paused == true) return false;
$(this).attr("src", "images/forward.gif");
}, function(){
if($.paused == true) return false;
$(this).attr("src", "images/forward_dull.gif");
});
$('#prevslide img').hover(function() {
if($.paused == true) return false;
$(this).attr("src", "images/back.gif");
}, function(){
if($.paused == true) return false;
$(this).attr("src", "images/back_dull.gif");
});

//Play/Pause Button
$('#pauseplay').click(function() {
if($.inAnimation) return false;
var src = ($(this).find('img').attr("src") === "images/play.gif") ? "images/pause.gif" : "images/play.gif";
if (src == "images/pause.gif"){
$(this).find('img').attr("src", "images/play.gif");
$.paused = false;
slideshow_interval = setInterval(nextslide, options.slide_interval);
}else{
$(this).find('img').attr("src", "images/pause.gif");
clearInterval(slideshow_interval);
$.paused = true;
}
$(this).find('img').attr("src", src);
return false;
});
$('#pauseplay').mouseover(function() {
var imagecheck = ($(this).find('img').attr("src") === "images/play_dull.gif");
if (imagecheck){
$(this).find('img').attr("src", "images/play.gif");
}else{
$(this).find('img').attr("src", "images/pause.gif");
}
});

$('#pauseplay').mouseout(function() {
var imagecheck = ($(this).find('img').attr("src") === "images/play.gif");
if (imagecheck){
$(this).find('img').attr("src", "images/play_dull.gif");
}else{
$(this).find('img').attr("src", "images/pause_dull.gif");
}
return false;
});
}
}
});

$(document).ready(function() {
$('#supersize').resizenow();
});

//Pause when hover on image
$('#supersize > *').hover(function() {
if (options.slideshow == 1 && options.pause_hover == 1){
if(!($.paused) && options.navigation == 1){
$('#pauseplay > img').attr("src", "images/pause.gif");
clearInterval(slideshow_interval);
}
}
original_title = $(this).find('img').attr("title");
if($.inAnimation) return false; else $(this).find('img').attr("title","");
}, function() {
if (options.slideshow == 1 && options.pause_hover == 1){
if(!($.paused) && options.navigation == 1){
$('#pauseplay > img').attr("src", "images/pause_dull.gif");
slideshow_interval = setInterval(nextslide, options.slide_interval);
}
}
$(this).find('img').attr("title", original_title);
});

$(window).bind("resize", function(){
$('#supersize').resizenow();
});

$('#supersize').hide();
$('#content').hide();
};

//Adjust image size
$.fn.resizenow = function() {
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
return this.each(function() {

//Define image ratio
var ratio = options.startheight/options.startwidth;

//Gather browser and current image size
var imagewidth = $(this).width();
var imageheight = $(this).height();
var browserwidth = $(window).width();
var browserheight = $(window).height();
var offset;

//Resize image to proper ratio
if ((browserheight/browserwidth) > ratio){
$(this).height(browserheight);
$(this).width(browserheight / ratio);
$(this).children().height(browserheight);
$(this).children().width(browserheight / ratio);
} else {
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
$(this).children().width(browserwidth);
$(this).children().height(browserwidth * ratio);
}
if (options.vertical_center == 1){
$(this).children().css('left', (browserwidth - $(this).width())/2);
$(this).children().css('top', (browserheight - $(this).height())/2);
}
return false;
});
};

$.fn.supersized.defaults = {
startwidth: 4,
startheight: 3,
vertical_center: 1,
slideshow: 1,
navigation:1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 5000
};

})(jQuery);

//Slideshow Next Slide
function nextslide() {
if($.inAnimation) return false;
else $.inAnimation = true;
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
var currentslide = $('#supersize .activeslide');
currentslide.removeClass('activeslide');

if ( currentslide.length == 0 ) currentslide = $('#supersize a:last');

var nextslide = currentslide.next().length ? currentslide.next() : $('#supersize a:first');
var prevslide = nextslide.prev().length ? nextslide.prev() : $('#supersize a:last');


//Display slide counter
if (options.slide_counter == 1){
var slidecount = $('#slidecounter .slidenumber').html();
currentslide.next().length ? slidecount++ : slidecount = 1;
$('#slidecounter .slidenumber').html(slidecount);
}

$('.prevslide').removeClass('prevslide');
prevslide.addClass('prevslide');

//Captions require img in <a>
if (options.slide_captions == 1) $('#slidecaption').html($(nextslide).find('img').a ttr('title'));

nextslide.hide().addClass('activeslide')
if (options.transition == 0){
nextslide.show(); $.inAnimation = false;
}
if (options.transition == 1){
nextslide.fadeIn(750, function(){$.inAnimation = false;});
}
if (options.transition == 2){
nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 3){
nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 4){
nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 5){
nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
}

$('#supersize').resizenow();//Fix for resize mid-transition

}

//Slideshow Previous Slide
function prevslide() {
if($.inAnimation) return false;
else $.inAnimation = true;
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
var currentslide = $('#supersize .activeslide');
currentslide.removeClass('activeslide');

if ( currentslide.length == 0 ) currentslide = $('#supersize a:first');

var nextslide = currentslide.prev().length ? currentslide.prev() : $('#supersize a:last');
var prevslide = nextslide.next().length ? nextslide.next() : $('#supersize a:first');

//Display slide counter
if (options.slide_counter == 1){
var slidecount = $('#slidecounter .slidenumber').html();
currentslide.prev().length ? slidecount-- : slidecount = $("#supersize > *").size();
$('#slidecounter .slidenumber').html(slidecount);
}

$('.prevslide').removeClass('prevslide');
prevslide.addClass('prevslide');

//Captions require img in <a>
if (options.slide_captions == 1) $('#slidecaption').html($(nextslide).find('img').a ttr('title'));

nextslide.hide().addClass('activeslide')
if (options.transition == 0){
nextslide.show(); $.inAnimation = false;
}
if (options.transition == 1){
nextslide.fadeIn(750, function(){$.inAnimation = false;});
}
if (options.transition == 2){
nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 3){
nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 4){
nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 5){
nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
}

$('#supersize').resizenow();//Fix for resize mid-transition
}

2. add default.php below into CSS section

<!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" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">

<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
<script type="text/javascript" src="supersized.2.0.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000
};
$('#supersize').supersized();
});
</script>

<style type="text/css">
*{
margin:0;
padding:0;
}
a{
color:#8FC2FF;
text-decoration: none;
outline: none;
}
a:hover{
text-decoration: underline;
}
img{
border:none;
}
body {
overflow:hidden;/*Needed to eliminate scrollbars*/
background:#000;
}
#content{
margin:0px auto;
height:100px;
width:100%;
bottom:5%;
z-index: 3;
background:#262626 no-repeat 90%;
border-top:1px solid #000;
border-bottom:1px solid #4F4F4F;
position:absolute;
}
#contentframe{
overflow: hidden;
border-top:solid 1px #4F4F4F;
border-bottom:1px solid #000;
height: 100%;
text-align:left;
z-index: 3;
}
#slidecounter{
float:left;
color:#4F4F4F;
font:50px "Helvetica Neue", Arial, sans-serif;
font-weight:bold;
margin:18px 20px;
}
#slidecaption{
overflow: hidden;
float:left;
color:#FFF;
font:26px "Helvetica Neue", Arial, sans-serif;
font-weight:bold;
margin:33px 0;
}
/*Supersized Stamp*/
.stamp{
float: right;
margin: 25px 20px 0 0;
}
/*Supersize Plugin Styles*/
#navigation{
background: url('images/navbg.gif') no-repeat;
float: right;
margin:22px 20px 0 0;
}
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 3;
width: 24px;
height: 24px;
text-indent: -999em;
background-image: url(images/progress.gif);
}
#supersize{
position:fixed;
}
#supersize img, #supersize a{
height:100%;
width:100%;
position:absolute;
z-index: 0;
}
#supersize .prevslide, #supersize .prevslide img{
z-index: 1;
}
#supersize .activeslide, #supersize .activeslide img{
z-index: 2;
}


</style>
</head>

<body>

<!--Loading display while images load-->
<div id="loading">&nbsp;</div>

<!--Slides-->
<div id="supersize">
<a href="http://interfacelift.com/wallpaper_beta/details/1819/bird_on_a_branch.html"><img src="images/bird.jpg" title="Bird On A Branch"/></a>
<a href="http://interfacelift.com/wallpaper_beta/details/988/paradise_lost.html"><img src="images/paradise.jpg" title="Paradise Lost"/></a>
<a href="http://interfacelift.com/wallpaper_beta/details/1864/morelia_viridis.html"><img src="images/snake.jpg" title="Morelia Viridis"/></a>
</div>

<!--Content area that hovers on top-->
<div id="content">
<div id="contentframe">

<div id="slidecounter"><!--Slide counter-->
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>
<div id="slidecaption"><!--Slide captions displayed here--></div>
<!--Logo-->
<a href="http://www.buildinternet.com" class="stamp"><img src="images/supersizedblackmini.gif"/></a>
<!--Navigation-->
<div id="navigation">
<a href="#" id="prevslide"><img src="images/back_dull.gif"/></a><a href="#" id="pauseplay"><img src="images/pause_dull.gif"/></a><a href="#" id="nextslide"><img src="images/forward_dull.gif"/></a>
</div>

</div>
</div>

</body>
</html>


3. Copy these external references to the custom header area:
"<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
<script type="text/javascript" src="supersized.2.0.js"></script>"
4. Add js with the variables as well as the custom div with the links to my photos in the bio with html tags.

I have to change some places to define my source. Anybody knows, please help me.....


Thank you in advance