LightBox Image Popup
Ok i've added this between
<head> and </head>
<script type="text/javascript">
function SWFDelegate(url,width,height,caption) {
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox');
objLink.setAttribute('title',caption);
if(typeof width != 'undefined') {
objLink.setAttribute('width',width);
if(typeof height != 'undefined') {
objLink.setAttribute('height',height);
Lightbox.prototype.start(objLink);
</script>
</head>
and on my button image on Adobe Flash CS3 i have.
on( release )
getURL("javascript:SWFDelegate('images/nelson.png','480','640','Septik')");
The picture shows the clickable hand but it doesn't show my picture any bigger, when i click it nothing happens, please help.
I have the same problem and it's driving me nuts. Resizing the Hero (???) frame or the immense lightbox container does nothing. the hero comes in at 47%. is there some size/lock/mechanism working here?
The design is clearly different from the preview.
Similar Messages
-
When I attempt to save an image from a web site page, I right click and then the Save Image popup appears. At the bottom of the popup, the "File name" box will contain the appropriate file name of the image. However, in the "Save as Type" box, there is nothing listed and I can't enter a file extension, such as JPEG. What then is saved is just a thumbnail image
You can use this extension to modify the menu.
*Menu Editor: https://addons.mozilla.org/firefox/addon/menu-editor/
You can also achieve this with code in the userChrome.css file below the default @namespace line.
*http://kb.mozillazine.org/userChrome.css
The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.
*http://kb.mozillazine.org/Editing_configuration
<pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#context-sendimage,
#context-sendvideo,
#context-sendaudio { display:none!important; }</nowiki></pre> -
Hi ,
I want to create a popup which pops up an image. I have seen
insert image but i want to know how to do an image popup . If i
select a word and choose popup from the main menu it shows me the
topics which i want to add so should i keep the images in a topic.
I want only the image to be shown in the popup if i customise the
popup linking to a topic the extra space in the page is also
included. I know i am beating around the bush. Let me know how to
execute this i am using robohelp x4 and webhelp for my project.
Thanks
RamyaRamya,
Create a new, separate topic just for the image itself. Leave
that topic out the TOC and Index (or use it, if you want to point
to the image by itself).
I think Rick and Peter have some tips on their sites about
working with images.
H -
Why no SCALE option for lightbox images?
Need SCALE options for lightbox images!
Must have SCALE DOWN option.
Images must scale down to display correctly on a smaller screen.
Currently Muse Lightbox FAILS on smaller browser screens.
Adobe please include this feature ASAP!Thanks for the reply
The problem with the Fullscreen Lightbox is that the images scale up and pixelate on a larger browser viewport.
(To avoid this requires a very large image that makes loading slow)
So for Fullscreen Lightbox I would like a SCALE DOWN ONLY option (requested previously). Then the images would not scale up above 100% and would float centred on larger browser viewports (FIT PROPORTIONALLY option used).
And for the standard lightbox a scale option, as requested above, would mean the image doesn't overflow on a smaller browser viewport.
The reason for asking for scale options is to keep images looking their best at 100%, and downscaling for smaller browser ports. -
Hover over hotspot - image popup? How to?
Hi, new to HTML and CSS - really no code to post, anything I try doesn't work in the slightest.
I'm trying to have an image popup directly below a hotspot on mouseover of that hotspot. I can get it to work on text, but not with the hotspot. Either doesn't work at all, or the image that is supposed to pop up is permanently at the bottom of the screen (I suppose where the coords for the hotspot map are).
Any help appreciated, thanks.Have a look here http://forums.adobe.com/message/2248950
Gramps -
Lightbox images change direction in mid-presentation
My lightbox images are changing direction in mid-presentation. They started sliding in horizontally from the right edge of frame. After 4 or 5 are presented, the next images slide in from the left side of frame.
Is there anything different about that slide or set of slides? Have you tried copying the slides into a new Presentation or opening the Presentation under a different user on your computer?
What are you using to advance your presentation? -
Can you click on an open Lightbox image to close the Lightbox?
Does anyone out there know about the "work-around" so that when you click an open Lightbox image, the Lightbox will close?
I can get the Lightbox image to close when I click outside the Lightbox image, but can't figure out a way to close it when I click on the Lightbox image.
Any help is greatly appreciated.Thickbox is a form of Lightbox.
The link is to the download and description page which clearly points out that Thickbox allows viewers to close the image by clicking anywhere inside or out of the image when it's displayed. (Which I believe is what you originally asked when the thread was started)
I wasn't trying to be smart-assed or cryptic.
That's why I posted it in 20 point type. It was my intention that you'd see it as a link and follow it for more information.
Since I obviously got it wrong, here's the info:
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
Overview
Examples
Q & A
Support
Donate
Overview-
Features:
ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k.
The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
ThickBox will resize images that are bigger than the browser window.
ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
ThickBox will hide form elements in Windows IE 6.
ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
Due to the ThickBox creator's view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).
Download
code
css
gif
compressed code
Download thickbox.js or thickbox-compressed.js, ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.
* Thickbox 3.1 - One Box To Rule Them All.
* By Cody Lindley (http://www.codylindley.com)
* Copyright (c) 2007 cody lindley
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
var tb_pathToImage = "images/loadingAnimation.gif";
/*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/
//on page load call tb_init
$(document).ready(function(){
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;
//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
$(domChunk).click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
try {
if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
$("body","html").css({height: "100%", width: "100%"});
$("html").css("overflow","hidden");
if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove);
}else{//all others
if(document.getElementById("TB_overlay") === null){
$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(tb_remove);
if(tb_detectMacXFF()){
$("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
}else{
$("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
if(caption===null){caption="";}
$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
$('#TB_load').show();//show loader
var baseURL;
if(url.indexOf("?")!==-1){ //ff there is a query string involved
baseURL = url.substr(0, url.indexOf("?"));
}else{
baseURL = url;
var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
var urlType = baseURL.toLowerCase().match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
TB_PrevCaption = "";
TB_PrevURL = "";
TB_PrevHTML = "";
TB_NextCaption = "";
TB_NextURL = "";
TB_NextHTML = "";
TB_imageCount = "";
TB_FoundURL = false;
if(imageGroup){
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {
var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
if (!(TB_TempArray[TB_Counter].href == url)) {
if (TB_FoundURL) {
TB_NextCaption = TB_TempArray[TB_Counter].title;
TB_NextURL = TB_TempArray[TB_Counter].href;
TB_NextHTML = "<span id='TB_next'> <a href='#'>Next ></a></span>";
} else {
TB_PrevCaption = TB_TempArray[TB_Counter].title;
TB_PrevURL = TB_TempArray[TB_Counter].href;
TB_PrevHTML = "<span id='TB_prev'> <a href='#'>< Prev</a></span>";
} else {
TB_FoundURL = true;
TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
imgPreloader = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;
// Resizing large images - orginal by Christian Montoya edited by me.
var pagesize = tb_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
// End Resizing
TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");
$("#TB_closeWindowButton").click(tb_remove);
if (!(TB_PrevHTML === "")) {
function goPrev(){
if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);}
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
return false;
$("#TB_prev").click(goPrev);
if (!(TB_NextHTML === "")) {
function goNext(){
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
tb_show(TB_NextCaption, TB_NextURL, imageGroup);
return false;
$("#TB_next").click(goNext);
document.onkeydown = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
if(keycode == 27){ // close
tb_remove();
} else if(keycode == 190){ // display previous image
if(!(TB_NextHTML == "")){
document.onkeydown = "";
goNext();
} else if(keycode == 188){ // display next image
if(!(TB_PrevHTML == "")){
document.onkeydown = "";
goPrev();
tb_position();
$("#TB_load").remove();
$("#TB_ImageOff").click(tb_remove);
$("#TB_window").css({display:"block"}); //for safari using css instead of show
imgPreloader.src = url;
}else{//code to show html
var queryString = url.replace(/^[^\?]+\??/,'');
var params = tb_parseQuery( queryString );
TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
if(url.indexOf('TB_iframe') != -1){// either iframe or ajax window
urlNoQuery = url.split('TB_');
$("#TB_iframeContent").remove();
if(params['modal'] != "true"){//iframe no modal
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' > </iframe>");
}else{//iframe modal
$("#TB_overlay").unbind();
$("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'> </iframe>");
}else{// not an iframe, ajax
if($("#TB_window").css("display") != "block"){
if(params['modal'] != "true"){//ajax no modal
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");
}else{//ajax modal
$("#TB_overlay").unbind();
$("#TB_window").append("<div id='TB_ajaxContent' class='TB_modal' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
}else{//this means the window is already up, we are just loading new content via ajax
$("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";
$("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";
$("#TB_ajaxContent")[0].scrollTop = 0;
$("#TB_ajaxWindowTitle").html(caption);
$("#TB_closeWindowButton").click(tb_remove);
if(url.indexOf('TB_inline') != -1){
$("#TB_ajaxContent").append($('#' + params['inlineId']).children());
$("#TB_window").unload(function () {
$('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
tb_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}else if(url.indexOf('TB_iframe') != -1){
tb_position();
if($.browser.safari){//safari needs help because it will not fire iframe onload
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}else{
$("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method
tb_position();
$("#TB_load").remove();
tb_init("#TB_ajaxContent a.thickbox");
$("#TB_window").css({display:"block"});
if(!params['modal']){
document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
if(keycode == 27){ // close
tb_remove();
} catch(e) {
//nothing here
//helper functions below
function tb_showIframe(){
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
function tb_remove() {
$("#TB_imageOff").unbind("click");
$("#TB_closeWindowButton").unbind("click");
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
$("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$("html").css("overflow","");
document.onkeydown = "";
document.onkeyup = "";
return false;
function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
function tb_parseQuery ( query ) {
var Params = {};
if ( ! query ) {return Params;}// return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
return Params;
function tb_getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
arrayPageSize = [w,h];
return arrayPageSize;
function tb_detectMacXFF() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
return true;
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
*{padding: 0; margin: 0;}
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
#TB_title{
background-color:#e8e8e8;
height:27px;
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
#TB_ajaxContent.TB_modal{
padding:15px;
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
Right Click and Download:
* Thickbox 3 - One Box To Rule Them All.
* By Cody Lindley (http://www.codylindley.com)
* Copyright (c) 2007 cody lindley
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
var tb_pathToImage = "images/loadingAnimation.gif";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(o).2S(9(){1u(\'a.18, 3n.18, 3i.18\');1w=1p 1t();1w.L=2H});9 1u(b){$(b).s(9(){6 t=X.Q||X.1v||M;6 a=X.u||X.23;6 g=X.1N||P;19(t,a,g);X.2E();H P})}9 19(d,f,g){3m{3(2t o.v.J.2i==="2g"){$("v","11").r({A:"28%",z:"28%"});$("11").r("22","2Z");3(o.1Y("1F")===M){$("v").q("<U 5=\'1F\'></U><4 5=\'B\'></4><4 5=\'8\'></4>");$("#B").s(G)}}n{3(o.1Y("B")===M){$("v").q("<4 5=\'B\'></4><4 5=\'8\'></4>");$("#B").s(G)}}3(1K()){$("#B").1J("2B")}n{$("#B").1J("2z")}3(d===M){d=""}$("v").q("<4 5=\'K\'><1I L=\'"+1w.L+"\' /></4>");$(\'#K\').2y();6 h;3(f.O("?")!==-1){h=f.3l(0,f.O("?"))}n{h=f}6 i=/\\.2s$|\\.2q$|\\.2m$|\\.2l$|\\.2k$/;6 j=h.1C().2h(i);3(j==\'.2s\'||j==\'.2q\'||j==\'.2m\'||j==\'.2l\'||j==\'.2k\'){1D="";1G="";14="";1z="";1x="";R="";1n="";1r=P;3(g){E=$("a[@1N="+g+"]").36();25(D=0;((D<E.1c)&&(R===""));D++){6 k=E[D].u.1C().2h(i);3(!(E[D].u==f)){3(1r){1z=E[D].Q;1x=E[D].u;R="<1e 5=\'1X\'>&1d;&1d;<a u=\'#\'>2T &2R;</a></1e>"}n{1D=E[D].Q;1G=E[D].u;14="<1e 5=\'1U\'>&1d;&1d;<a u=\'#\'>&2O; 2N</a></1e>"}}n{1r=1b;1n="1t "+(D+1)+" 2L "+(E.1c)}}}S=1p 1t();S.1g=9(){S.1g=M;6 a=2x();6 x=a[0]-1M;6 y=a[1]-1M;6 b=S.z;6 c=S.A;3(b>x){c=c*(x/b);b=x;3(c>y){b=b*(y/c);c=y}}n 3(c>y){b=b*(y/c);c=y;3(b>x){c=c*(x/b);b=x}}13=b+30;1a=c+2G;$("#8").q("<a u=\'\' 5=\'1L\' Q=\'1o\'><1I 5=\'2F\' L=\'"+f+"\' z=\'"+b+"\' A=\'"+c+"\' 23=\'"+d+"\'/></a>"+"<4 5=\'2D\'>"+d+"<4 5=\'2C\'>"+1n+14+R+"</4></4><4 5=\'2A\'><a u=\'#\' 5=\'Z\' Q=\'1o\'>1l</a> 1k 1j 1s</4>");$("#Z").s(G);3(!(14==="")){9 12(){3($(o).N("s",12)){$(o).N("s",12)}$("#8").C();$("v").q("<4 5=\'8\'></4>");19(1D,1G,g);H P}$("#1U").s(12)}3(!(R==="")){9 1i(){$("#8").C();$("v").q("<4 5=\'8\'></4>");19(1z,1x,g);H P}$("#1X").s(1i)}o.1h=9(e){3(e==M){I=2w.2v}n{I=e.2u}3(I==27){G()}n 3(I==3k){3(!(R=="")){o.1h="";1i()}}n 3(I==3j){3(!(14=="")){o.1h="";12()}}};16();$("#K").C();$("#1L").s(G);$("#8").r({Y:"T"})};S.L=f}n{6 l=f.2r(/^[^\\?]+\\??/,\'\');6 m=2p(l);13=(m[\'z\']*1)+30||3h;1a=(m[\'A\']*1)+3g||3f;W=13-30;V=1a-3e;3(f.O(\'2j\')!=-1){1E=f.1B(\'3d\');$("#15").C();3(m[\'1A\']!="1b"){$("#8").q("<4 5=\'2f\'><4 5=\'1H\'>"+d+"</4><4 5=\'2e\'><a u=\'#\' 5=\'Z\' Q=\'1o\'>1l</a> 1k 1j 1s</4></4><U 1W=\'0\' 2d=\'0\' L=\'"+1E[0]+"\' 5=\'15\' 1v=\'15"+1f.2c(1f.1y()*2b)+"\' 1g=\'1m()\' J=\'z:"+(W+29)+"p;A:"+(V+17)+"p;\' > </U>")}n{$("#B").N();$("#8").q("<U 1W=\'0\' 2d=\'0\' L=\'"+1E[0]+"\' 5=\'15\' 1v=\'15"+1f.2c(1f.1y()*2b)+"\' 1g=\'1m()\' J=\'z:"+(W+29)+"p;A:"+(V+17)+"p;\'> </U>")}}n{3($("#8").r("Y")!="T"){3(m[\'1A\']!="1b"){$("#8").q("<4 5=\'2f\'><4 5=\'1H\'>"+d+"</4><4 5=\'2e\'><a u=\'#\' 5=\'Z\'>1l</a> 1k 1j 1s</4></4><4 5=\'F\' J=\'z:"+W+"p;A:"+V+"p\'></4>")}n{$("#B").N();$("#8").q("<4 5=\'F\' 3c=\'3b\' J=\'z:"+W+"p;A:"+V+"p;\'></4>")}}n{$("#F")[0].J.z=W+"p";$("#F")[0].J.A=V+"p";$("#F")[0].3a=0;$("#1H").11(d)}}$("#Z").s(G);3(f.O(\'37\')!=-1){$("#F").q($(\'#\'+m[\'26\']).1T());$("#8").24(9(){$(\'#\'+m[\'26\']).q($("#F").1T())});16();$("#K").C();$("#8").r({Y:"T"})}n 3(f.O(\'2j\')!=-1){16();3($.1q.35){$("#K").C();$("#8").r({Y:"T"})}}n{$("#F").34(f+="&1y="+(1p 33().32()),9(){16();$("#K").C();1u("#F a.18");$("#8").r({Y:"T"})})}}3(!m[\'1A\']){o.21=9(e){3(e==M){I=2w.2v}n{I=e.2u}3(I==27){G()}}}}31(e){}}9 1m(){$("#K").C();$("#8").r({Y:"T"})}9 G(){$("#2Y").N("s");$("#Z").N("s");$("#8").2X("2W",9(){$(\'#8,#B,#1F\').2V("24").N().C()});$("#K").C();3(2t o.v.J.2i=="2g"){$("v","11").r({A:"1Z",z:"1Z"});$("11").r("22","")}o.1h="";o.21="";H P}9 16(){$("#8").r({2U:\'-\'+20((13/2),10)+\'p\',z:13+\'p\'});3(!(1V.1q.2Q&&1V.1q.2P<7)){$("#8").r({38:\'-\'+20((1a/2),10)+\'p\'})}}9 2p(a){6 b={};3(!a){H b}6 c=a.1B(/[;&]/);25(6 i=0;i<c.1c;i++){6 d=c[i].1B(\'=\');3(!d||d.1c!=2){39}6 e=2a(d[0]);6 f=2a(d[1]);f=f.2r(/\\+/g,\' \');b[e]=f}H b}9 2x(){6 a=o.2M;6 w=1S.2o||1R.2o||(a&&a.1Q)||o.v.1Q;6 h=1S.1P||1R.1P||(a&&a.2n)||o.v.2n;1O=[w,h];H 1O}9 1K(){6 a=2K.2J.1C();3(a.O(\'2I\')!=-1&&a.O(\'3o\')!=-1){H 1b}}',62,211,'|||if|div|id|var||TB_window|function||||||||||||||else|document|px|append|css|click||href|body||||width|height|TB_overlay|remove|TB_Counter|TB_TempArray|TB_ajaxContent|tb_remove|return|keycode|style|TB_load|src|null|unbind|indexOf|false|title|TB_NextHTML|imgPreloader|block|iframe|ajaxContentH|ajaxContentW|this|display|TB_closeWindowButton||html|goPrev|TB_WIDTH|TB_PrevHTML|TB_iframeContent|tb_position||thickbox|tb_show|TB_HEIGHT|true|length|nbsp|span|Math|onload|onkeydown|goNext|Esc|or|close|tb_showIframe|TB_imageCount|Close|new|browser|TB_FoundURL|Key|Image|tb_init|name|imgLoader|TB_NextURL|random|TB_NextCaption|modal|split|toLowerCase|TB_PrevCaption|urlNoQuery|TB_HideSelect|TB_PrevURL|TB_ajaxWindowTitle|img|addClass|tb_detectMacXFF|TB_ImageOff|150|rel|arrayPageSize|innerHeight|clientWidth|self|window|children|TB_prev|jQuery|frameborder|TB_next|getElementById|auto|parseInt|onkeyup|overflow|alt|unload|for|inlineId||100||unescape|1000|round|hspace|TB_closeAjaxWindow|TB_title|undefined|match|maxHeight|TB_iframe|bmp|gif|png|clientHeight|innerWidth|tb_parseQuery|jpeg|replace|jpg|typeof|which|keyCode|event|tb_getPageSize|show|TB_overlayBG|TB_closeWindow|TB_overlayMacFFBGHack|TB_secondLine|TB_caption|blur|TB_Image|60|tb_pathToImage|mac|userAgent|navigator|of|documentElement|Prev|lt|version|msie|gt|ready|Next|marginLeft|trigger|fast|fadeOut|TB_imageOff|hidden||catch|getTime|Date|load|safari|get|TB_inline|marginTop|continue|scrollTop|TB_modal|class|TB_|45|440|40|630|input|188|190|substr|try|area|firefox'.split('|'),0,{}))
How to Implement ThickBox:
Before you can implement ThickBox make sure the page that invokes ThickBox has a valid DTD. This is required for ThickBox to look and function correctly.
1. ThickBox requires the jQuery JavaScript library; because of this, you will need to include the jquery.js file in the head element of your web page, followed by the thickbox.js file (NOTE: jquery.js must come first in the source order). Example below:
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
Once you have included the .js files, open thickbox.js or thickbox-compressed.js and locate the tb_pathToImage variable at the top of the page. Once you have found it, make sure to change the value of tb_pathToImage to the path where the loadingAnimation.gif file is located on your own server.
2. Include the ThickBox CSS file in your web page. As of version 3.1 you will also need to update the path to the macFFBgHack.png in the thickbox.css file. Example options below:
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
Or
<style type="text/css" media="all">@import "path-to-file/thickbox.css";</style>
Or, open the thickbox.css file and copy and paste the styles into an existing style sheet. Be aware that the ThickBox CSS file will remove the browsers default padding and margin for all elements.
3. View the examples to learn the many different ways to use and invoke ThickBox functionality.
Supported & Tested Browsers
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+
MIT License/GNU License
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.
Change Log
As of 08/01/2007
Added modal functionality to ThickBox iframes
Fixed Flash transparency issue with Firefox on OSX
Updated to jQuery 1.1.3.1
Changed how inline content is handled in Thickbox. Instead of duplicating the inline content thickbox will now move it accordingly inside of the DOM
Safari iframe source issue solved
As of 05/02/2007
If sizes are not set for width and/or height (inline, iframe, and ajax content), ThickBox will default to a width of 630px and a height of 440px
iframe hack to hide &select" elements now only runs in IE 6
Scrollbars are removed in IE 6 when a ThickBox is opened (to counter IE 6's errant width and height calculations)
Cleaned code using -
Lightbox images are squareish when the gallery starts
Lightbox images are squareish when the gallery starts and should be photographic proportions, they are correct in the thumbnails. fit proportionately is on
I adjusted it on the gallery box itself and they all show correctly now, Should be automatic really. also better editing capabilities of the lightbox would be appreciated its a failry big and useful part of the software
-
Hi,
Does any one know of an extension which creates a large image
popup on mouse over and it works with images from a database
too.Hi Zabeth,
Thanks for your reply!
How exactly can i define the hotspot and not the image as the rollover? I guess i replace the:
<a class="thumbnail" href="#thumb"><img src="sales1.1_thumb.jpg" width="80px" height="60px" border="0" /><span>
<img src="sales1.2.jpg" />
</span>
</a>
with something like:
<a class="thumbnail" href="#thumb"><map name="Map" id="Map"> <area shape="rect" coords="33,140,114,260" href="#" /></map><span>
<img src="sales1.2.jpg" />
</span>
</a>
However this obviously doesnt work! Am i on the right direction!?
Thanks -
Large image popup on mouse over
Does any one know of an extension which creates a large image
popup on mouse over and it works with images from a database too?Does any one know of an extension which creates a large image
popup on mouse over and it works with images from a database too? -
Lightbox Image that autoloads when webpage is visited
Hi, Please point me in the right direction. I want to create a lightbox sign up image that autostarts when a new visitor is on our homepage. Where can I find a tutorial about this or what are the keywords I can search? I have been looking for 'lightbox' but can't seem to find what I am looking for. I don't want there to be a thumbnail on the page and then click on it...I want the image to automatically pop up asking the visitor to sign up for our MVP club.
Thanks for your time and help!Hi, I use Ibox for this task.
this is the code y use in the body tag:
<body onload="iBox.showURL('popup.php','',
width: '700',
height: '482'
});">
just replace popup.php for you form page. Ibox admits flash, html and iframe beside images. -
Lightbox images not showing when uploaded to my website
Hello
I'm creating a new website for my photography business, and have created three 'gallery' pages which are basically just a lightbox gallery on each page with 20 images in.
I uploaded my first page, gallery1, and the associated images and went to test it and some of the thumbnail images didn't appear. I renamed the images in my 'gallery1 thumbnails' folder (which had originally been the same names as the images in gallery1) by adding 'tb' at the end of each image name and reuploaded them to my host and it resolved the problem. I uploaded gallery2 in the same way and ran into the same problem. I renamed the images again and reuploaded as I had before to fix the problem, but it didn't fix it this time. I changed the names in gallery3 thumbnails first and uploaded them and they uploaded perfectly. I went back to gallery2, and noticed that all the images I was having a problem with had a '_' character in them. I took that out, reuploaded, still not working. I've double checked everything's as it should be, reuploaded everything a couple more times for good measure, and it works on live view and when I open the file on my computer but once they're uploaded to my host it doesn't work. Can anyone shed a bit of light on this for me? Page in question in here: http://www.emmarichards.co.uk/gallery-2.html and code is here:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barnsley wedding photographer - Emma Richards Photography</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin: 0;
padding: 0;
color: #000;
background-image: url();
background-repeat: repeat;
margin-top: 20px;
margin-bottom: 10px;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
.header {
background-color: #FFFFFF;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
padding: 10px 0;
font-size: 90%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #FFFFFF;
font-size: xx-small;
color: #f08080;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: #ffffff;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
width: 100%;
height: auto;
text-align: center;
.lbGallery ul { list-style: none; margin:0;padding:0; }
.lbGallery ul li { display: inline;margin:0;padding:0; }
.lbGallery ul li a{text-decoration:none;}
.lbGallery ul li a img {
/*border color, width and margin for the images*/
border-color: #ffffff;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px:
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffffff;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
#lightbox-container-image-box {
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
/* EndOAWidget_Instance_2127022 */
</style>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
<oa:widget wid="2141544" binding="#MenuBar" />
</oa:widgets>
-->
</script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#ffffff;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 16px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 0px 0px 0px;
background-color:#ffffff;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#333333;
background-color:#ffffff;
padding: 0px 0px 0px 0px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
font-style: normal;
background-color:#ffffff;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#ffffff;
color:#333333;
padding: 6px 12px 6px 5px;
width: 7em;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #ffffff;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #ffffff; /* consider exposing this prop separately*/
color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #ffffff;
color: #000000;
#MenuBar .SubMenu .MenuItemHover {
background-color: #ffffff;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #ffffff;
color: #333333;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #ffffff;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #ffffff; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #ffffff; /* consider exposing this prop separately*/
color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
</head>
<body>
<div class="container">
<div class="header">
<div align="center">
<p><a href="index.html"><img src="Layout/watermark-coral-jpeg-200px.jpg" width="200" height="182" alt="wedding photgraphers barnsley" /></a></p>
<table width="500" border="0">
<tr>
<td><a href="about.html"><img src="Layout/about-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
<td><a href="weddings.html"><img src="Layout/weddings-c.png" width="145" height="28" alt="wedding photographer barnsley" /></a></td>
<td><a href="gallery.html"><img src="Layout/gallery-c.png" width="145" height="28" alt="wedding photographers barnsley" /></a></td>
<td><a href="pricing.html"><img src="Layout/pricing-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
<td><script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
<img src="Layout/engagements-c.png" width="145" height="28" alt="barnsley wedding photographer" />
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script></td>
<td><a href="http://www.emmarichardsphotography.com"><img src="Layout/blog.png" width="145" height="28" alt="wedding photographer barnsley" /></a></td>
<td><a href="contact.html"><img src="Layout/contact-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
</tr>
</table>
<p> </p>
</div>
<!-- end .header --></div>
<div class="content">
<div align="center">
<table width="80%" border="0">
<tr>
<td><div id="gallery" class="lbGallery">
<ul>
<p><li> <a href="Images/Gallery2/Abbie and Ben 0567.jpg" title=""><img src="Images/Gallery2/Thumbnails/Abbie and Ben 0567tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/Laura Mal 046.jpg" title=""><img src="Images/Gallery2/Thumbnails/Laura Mal 046tb.jpg" alt="wedding photographer barnsley" /></a> </li>
<li> <a href="Images/Gallery2/img0056bw.jpg" title=""><img src="Images/Gallery2/Thumbnails/img0056bwtb.jpg" alt="wedding photographers sheffield" /></a> </li>
<li> <a href="Images/Gallery2/ka319.jpg" title=""><img src="Images/Gallery2/Thumbnails/ka319tb.jpg" alt="wedding photography barnsley" /></a> </li>
<li> <a href="Images/Gallery2/no crying.jpg" title=""><img src="Images/Gallery2/Thumbnails/no cryingtb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
<p><li> <a href="Images/Gallery2/img5549.jpg" title=""><img src="Images/Gallery2/Thumbnails/img5549tb.jpg" alt="wedding photographer barnsley" /></a> </li>
<li> <a href="Images/Gallery2/jr89.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr89tb.jpg" alt="wedding photography barnsley" /></a> </li>
<li> <a href="Images/Gallery2/img3239.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3239tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/jr2.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr2tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/sa711.jpg" title=""><img src="Images/Gallery2/Thumbnails/sa711tb.jpg" alt="" /></a> </li></p>
<p><li> <a href="Images/Gallery2/JamesRuth0056.jpg" title=""><img src="Images/Gallery2/Thumbnails/JamesRuth0056tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/mr mrs.jpg" title=""><img src="Images/Gallery2/Thumbnails/mr mrstb.jpg" alt="wedding photography barnsley" /></a></li>
<li><a href="Images/Gallery2/ka5.jpg" title=""><img src="Images/Gallery2/Thumbnails/ka5tb.jpg" alt="wedding photographer barnsley" /></a></li>
<li> <a href="Images/Gallery2/run.jpg" title=""><img src="Images/Gallery2/Thumbnails/runtb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/img3440.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3440tb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
<p><li> <a href="Images/Gallery2/img3307.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3307tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/centerpiece 2.jpg" title=""><img src="Images/Gallery2/Thumbnails/centerpiece 2tb.jpg" alt="wedding photographer barnsley" /></a> </li>
<li> <a href="Images/Gallery2/jr102.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr102tb.jpg" alt="wedding photography barnsley" /></a> </li>
<li> <a href="Images/Gallery2/img0523.jpg" title=""><img src="Images/Gallery2/Thumbnails/img0523tb.jpg" alt="wedding photography barnsley" /></a> </li>
<li> <a href="Images/Gallery2/hug.jpg" title=""><img src="Images/Gallery2/Thumbnails/hugtb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
</ul>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
$(function(){
$('#gallery a').lightBox({
imageLoading: 'Layout/spin.gif', // (string) Path and the name of the loading icon
imageBtnPrev: 'Layout/prev.jpg', // (string) Path and the name of the prev button image
imageBtnNext: 'Layout/next.jpg', // (string) Path and the name of the next button image
imageBtnClose: 'Layout/close.png', // (string) Path and the name of the close btn
imageBlank: 'images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.
overlayBgColor: "#ffffff", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity: 0, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Image', //Default text of image
txtOf: 'of'
// EndOAWidget_Instance_2127022
</script><div align="center"> </div></td>
</tr>
<tr>
<td><div align="center">
<table width="100" border="0">
<tr>
<td width="50"><div align="right"><a href="gallery.html"><img src="Layout/prev2.jpg" alt="wedding photographers barnsley" width="63" height="32" /></a></div></td>
<td width="50"><a href="gallery-3.html"><img src="Layout/next2.jpg" alt="wedding photographers sheffield" width="63" height="32" /></a></td>
</tr>
</table>
</div></td>
</tr>
</table>
<p> </p>
<!-- end .content --></div>
</div>
<div class="footer">
<p align="right"><strong>07794430229 // [email protected]</strong></p>
<div align="right">
<table align="right" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<!-- end .footer -->
</div>
<div align="right">
<table align="right" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<!-- end .footer --></div>
</div>
<!-- end .container --></div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28715127-1']);
_gaq.push(['_setDomainName', 'emmarichards.co.uk']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</body>
</html>
If someone could help me with my issue I'd be very greatful, it's been stumping me for hours now.
Thank you in advance for any help!!When I see code errors, I stop trying to trouble shoot because code errors account for 98% of browser rendering problems. When you clear up your orphaned tags: mismatched <p></p> and <li></li> tags, then I'll take a closer look.
PS. Being able to work with code is essential to using DW and 3rd party plugins. Without basic coding skills, you're going to be lost most of the time.
HTML & CSS Tutorials -
http://www.html.net/
http://w3schools.com/
Nancy O. -
Next / previous image swap WITH larger image popup
Very simply what I need to do is almost identical to what you
see here:
http://www.java-scripts.net/javascripts/Slide-Show-Script.phtml
(scroll down to the animal pictures)
When you click "next" and "previous" the images swap through
a series
called "img1.gif" "img2.gif" and "img3.gif"
So far so good. However let us assume there is also a set of
images called
"img1_lrg.gif" "img2_lrg.gif" and "img3_lrg.gif" which are
larger
versions of those little thumbnails. I need for the
appropriate associated
large image to popup in its own window when the thumb is
clicked.
Has anyone a lead on something like that?
Thanks very much.On Thu, 28 Sep 2006 17:59:37 +0000 (UTC), [email protected]
(Clay)
wrote:
>Very simply what I need to do is almost identical to what
you see here:
>
>
http://www.java-scripts.net/javascripts/Slide-Show-Script.phtml
>
>(scroll down to the animal pictures)
>
>When you click "next" and "previous" the images swap
through a series
>called "img1.gif" "img2.gif" and "img3.gif"
>
>So far so good. However let us assume there is also a set
of images called
>
>"img1_lrg.gif" "img2_lrg.gif" and "img3_lrg.gif" which
are larger
>versions of those little thumbnails. I need for the
appropriate associated
>large image to popup in its own window when the thumb is
clicked.
>
>Has anyone a lead on something like that?
>
>Thanks very much.
That sounds simple, where are you stuck? Do you not know how
to open a
popup? BTW, the JustSo Picture Window extension would be
perfect for
the popups. -
Lightbox images not clickable on iPhone
I have created a lightbox for my site portfolio.danielmusica.com that works great on the desktop and ipad. But when you view it on the iPhone, the images that are clickable wont bring up the videos.
It's not just you. A whole host of people, including me, started having this issue today. I have a 3GS running 5.0.1. I have been reading or the couple hours and it seems it's a cross platform issue, not an iPhone issue. Seems to be something wrong with google mobile image search. Some are reporting success with switching from mobile to classic view in google.
Now I think we need to just wait on google to fix the issue. -
Good afternoon,
I have DL and added to my website a gallery.
Within the pop up image the Prev, Next and Close.gif images are missing when I click on a image..
I can see them within DW, but not on the pop up window.
I do not have a host yet, so everything is on my internal C:/ drive.
Everything (images) is under e.g: C:users/myname/desktop/ghp1968/images/lightbox/lightbox-prev, next and close.gif
In the Jquery and lightbox JS files, the image path is /images/lightbox/lightbox-next, prev and close.gif.
This is also the path in the page that I have the gallery.
Are you able to advise where I might be going wrong.
*** Additionally, the border is white on the image pop up. Is it possible/where is it possible to change the colour.
Thanks
Gary HorneHere is the feed:
http://feeds.feedburner.com/RockBlockPodcast
The Website:
http://www.rockblock.wordpress.com
And the iTunes link- The picture comes up here but when I search for it the purple man still comes up
http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=260388815
My old podcast I did with libsyn and this is the website:
http://www.top10countdown.libsyn.com
I don't have access to the feed on my libsyn one
Message was edited by: rockblock
Maybe you are looking for
-
I was given an older 40gb IPOD with lots of music. I bought an IHome clock radio to play the music. Problem: The IPOD will only play the song I selected before I put it into the Ihome cradle and when the song is finished it does not advance to the ne
-
Can't print a graph on the whole page in landscape
Hello! I have XY graph that I want to print on the whole page in landscape orientation (paper A4). On the screen the graph is small, so I do resizing, appending image to report, and then printing. After sending it to the printer I get preview (from t
-
How can I create xml file automatically from database
Hi, Can I create a site map drom database.There is table for storing menu details.Is it possible to create an xml file corresponding to a query. How can i configure root menu.xml to incllude this xml file.Please help me.. Thanks
-
Increase the font on contact list on my Mac
Hi; is there a way to increase the size of the font in the contact list on my Mac? We find the print terribly small. We are using Maverick. Thanks, Hans
-
Tuning a sql to remove cpu intensive operations
Along the simliar lines of the other thread but we want to tune a sql to reduce cpu impact. Its a complicated sql, joins subqueries, with etc. What tools/web pages/blogs should I focus on for this topic? An explain plan shows cpu .. is that showing t