PDA

View Full Version : Stretching Bio Box for Slideshow Help!!

SM
Oct-09-2009, 07:34 PM
:scratch

Hi all! Total newbie here... managed to customize my page a bit, need your help!

I have the stretchy slideshow on my homepage, but here is what I am missing:

1. I'd like my photos to stretch to the very edge of the bio box, does anyone know the code for that? It is something like what www.moonriverphotography.com has (which rocks!) but I want to keep my red border.

2. My main homepage is gone! I would like to find the page that had all of the gallery categories on it, it used to be my homepage, but now I have the slideshow on the homepage, is there a way to create a duplicate of that page elsewhere so I can create a link "home" to that instead of the slideshow?

Thanks sooo much!

Cristiani
jfriend
Oct-09-2009, 08:00 PM
First of all, take all of this out of your CSS customization. It is HTML, not CSS and is causing errors:

<!--[if IE]>
<style type="text/css" media="screen">
#mc_embed_signup fieldset {
position: relative;
}
#mc_embed_signup legend {
position: absolute;
top: -1em;
left: .2em;
}
</style>
<![endif]-->
******** type="text/javascript" src="http://sequinminer.us1.list-manage.com/js/jquery-1.2.6.min.js"></********
******** type="text/javascript" src="http://sequinminer.us1.list-manage.com/js/jquery.validate.js"></********
******** type="text/javascript" src="http://sequinminer.us1.list-manage.com/js/jquery.form.js"></********
******** type="text/javascript" src="http://sequinminer.us1.list-manage.com/subscribe/xs-js?u=6ec23cea0420f2e9d0869d6a1&amp;id=221c12fadf"></********
******** type="text/javascript">
mce_jQuery(document).ready(function(){
mce_jQuery('#mc_embed_signup').hide();
cks = document.cookie.split( ';' );
var show=true;
for(i=0;i<cks.length;i++){ if(cks[i].split('=")[0]==" mcevilpopupclosed') show="false;" } if (show){ mce_jquery('#mc_embed_signup a.mc_embed_close').show(); settimeout( function(){ mce_jquery('#mc_embed_signup').fadein();} , 5000); a.mc_embed_close').click(function(){ mcevilpopupclose();}); }); mce_jquery(document).keydown(function(e){ (e="=" null) {></cks.length;i++){>/ ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // escape, close box+
mcEvilPopupClose();
}
});

function mcEvilPopupClose(){
mce_jQuery('#mc_embed_signup').hide();
var now = new Date();
var expires_date = new Date( now.getTime() + 31536000000 ); //1 year
document.cookie = 'MCEvilPopupClosed=yes;expires=' + expires_date.toGMTString()
}
</********

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.8);display: none;">
<form action="http://sequinminer.us1.list-manage.com/subscribe/post?u=6ec23cea0420f2e9d0869d6a1&amp;id=221c12fadf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="position: fixed;top: 10%;left: 50%;width: 50%;margin-left: -25%;font: normal 100% Arial;font-size: 12px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #ffffff;color: #333333;">
<legend style="text-transform: capitalize;font-weight: bold;color: #ffffff;background: #474744;padding: .5em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;">join our mailing list</legend>
<div class="indicate-required" style="text-align: right;font-style: italic;overflow: hidden;color: #333333;margin: 0 9% 0 0;">* indicates required</div>
<div class="mc-field-group" style="margin: 0 5% 1.3em 5%;padding: 2px 0;clear: both;">
<label for="mce-EMAIL" style="display: block;margin: 15px 0 .3em 0;font-weight: bold;">Email <strong class="note-required">*</strong>
</label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;">
</div>
<div class="mc-field-group" style="margin: 0 5% 1.3em 5%;padding: 2px 0;clear: both;">
<label class="input-group-label" style="display: block;margin: 15px 0 .3em 0;font-weight: bold;">Email Format </label>
<div class="input-group" style="padding: .7em;font-size: .9em;margin: 0 0 1em 4%;">
<ul style="margin: 0;padding: 0;"><li style="list-style: none;overflow: hidden;padding: .2em 0;clear: right;"><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0" style="margin-right: 4%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-0" style="display: block;margin: .4em 0 0 0;font-weight: bold;width: auto;text-align: left;">html</label></li>
<li style="list-style: none;overflow: hidden;padding: .2em 0;clear: right;"><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1" style="margin-right: 4%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-1" style="display: block;margin: .4em 0 0 0;font-weight: bold;width: auto;text-align: left;">text</label></li>
<li style="list-style: none;overflow: hidden;padding: .2em 0;clear: right;"><input type="radio" value="mobile" name="EMAILTYPE" id="mce-EMAILTYPE-2" style="margin-right: 4%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-2" style="display: block;margin: .4em 0 0 0;font-weight: bold;width: auto;text-align: left;">mobile</label></li>
</ul>
</div>
</div>
<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #FFEEEE;color: #FF0000;"></div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #;color: #529214;"></div>
</div>
<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;margin: .2em 3em;display: block;"></div>
</fieldset>
<a href="#" id="mc_embed_close" class="mc_embed_close" style="background: transparent url(http://sequinminer.us1.list-manage.com/images/closebox.png) no-repeat;display: none;height: 30px;width: 30px;text-indent: -999em;position: absolute;top: 10px;right: -10px;">Close</a>
</form>
</div><!--mc_embed_signup-->


Then, your slideshow is exactly as large as you said it should be and it stretches. You set these parameters for the stretchy slideshow:

aspectHeightConstrain: "true",
aspectWidth: '1000',
aspectHeight: '500',

That tells the stretchy slideshow that you want to force a 2:1 aspect ratio on the slideshow. It will make the slideshow as large as it can be while maintaining a 2:1 aspect ratio. If, given the width of the window, it can be 1200px wide, then it will make it 600px high. If you remove those three parameters, then it will fill the available space rather than be contrained in that way.

Also, you have this in your CSS:

#homepage {width: auto !important; margin-left: 100px !important; margin-right: 100px !important;}

Which is forcing a 100px wide margin on both sides of the slideshow. Make those 100px numbers a lot smaller and you'll get a wider slideshow.