Viewing Strange behavior in fancyBox

  1. Portal Home
  2. Forum
  3. EverWeb
  4. Bug Reports

Strange behavior in fancyBox



User: Paul C. 12 years ago
I've added the jQuery FancyBox to iWeb, having this result:


The same snippet, inserted as per your instructions in EverWeb works in the same manner, but with a graphical strange result:


Why the menus became highlighted when showing fancyBox?

Thanks for your help
User: Roddy 12 years ago
I came across this problem when designing the Lightbox Widgets.

The basic z-index for the navigation is 1000 but, when the application changes the z-index it jumps to 10001. Most modal windows like the one you are using have a z-index of 999 so, when you try to bring it to the front with the Arrange menu it won't display above the navigation because the navigation z-index is way too high.

To overcome this bug, you will need to look at the FancyBox style sheet, find the z-index for the modal and increase it to something like 10100.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul C. 12 years ago
Thank you, Roddy, I've searched z-index in the code, but I've found only values of 0 and 2. Can you help me to identify the part to change?

Quote:

<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://beyondiweb.comhttp://beyondiweb.com/js/jquery.pagination.js"></script>
<script type="text/javascript" src="http://beyondiweb.comhttp://beyondiweb.com/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="http://beyondiweb.comhttp://beyondiweb.com/js/jquery.thumbs.js"></script>
<script type="text/javascript" src="http://beyondiweb.comhttp://beyondiweb.com/fancybox/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://beyondiweb.comhttp://beyondiweb.com/fancybox/jquery.fancybox-1.3.4.min.js"></script>
<script type="text/javascript" src="http://beyondiweb.comhttp://beyondiweb.com/fancybox/jquery.easing-1.3.pack.js"></script>
<style>
/* custom styles start */
#photo-fbgallery-tbpage{
/*widget_height*/height:800px;
overflow: hidden;
}
#photo-fbgallery-tbpage,#photolists>li,.jcarousel-item-horizontal,.jcarousel-item-placeholder-horizontal {/*widget_width*/width:700px;}
#photolists>li,.jcarousel-item-horizontal,.jcarousel-item-placeholder-horizontal {/*navi_height*/height:760px;}
.text-holder {/*font_size*/font-size:11px;/*font_family*/font-family:Arial,Arial,Helvetica,sans-serif;}

.page {/*background_color*/background-color:transparent;}
#photolists li img {border: none;position: absolute;z-index:0;}
.jcarousel-container-horizontal {width: 100%;height: 100%;margin: 0;padding: 0;}
.jcarousel-clip-horizontal {top: 0px;left: 0px;width: 100%;height: 100%;}
#photolists img {display: none;}
.page {width: 100%;height: 100%;list-style:none; margin: 0;padding: 0;}
.page li {float:left;margin:0;/*margin_right*/margin-right:23px;/*margin_bottom*/margin-bottom:23px;position:relative;overflow:hidden;display:block;}
.page li.lastcol {margin-right:0;}
.page li.lastrow {margin-bottom:0;}
.thumb-container,.thumb-inner,.thumb-img {border: none;display: block;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;position: relative;}
.thumb-container {border: none;/*thumb_width*/width:218px;/*thumb_height*/height:238px;margin: 0;padding: 0;}
.thumb-container a,.thumb-container img {border: none;margin: 0;padding: 0;}
.thumb-center img,.thumb-strip,.thumb-icon {margin: 0;padding: 0;border: none;position: absolute;}
.thumb-center img {border: none;margin: 0;padding: 0;}
.pagination_container {width:inherit; height:30px; text-align:center;clear:both;margin-top:10px;}
.pagination {font-size:0.8em;line-height:1.3em;font-family: Arial, Helvetica, sans-serif; display: inline-block;}
.pagination a {text-decoration: none; border: solid 1px #AAE; color: #15B;}
.pagination a:hover{text-decoration: underline;}
.pagination a, .pagination span {display: block;float: left;padding: 0.3em 0.5em;margin:1px 5px 4px 0px;min-width:1em;text-align:center;}
.pagination .current {background: #26B;color: #fff;border: solid 1px #AAE;}
.pagination .current.prev, .pagination .current.next{color:#999;border-color:#999;background:#fff;}
.pagination .next {margin-right:0px;}
.page a {text-decoration: none;}
.text-holder {position: absolute;display: none;text-align:center;padding: 5px;margin: 0;background-color: rgba(0, 0, 0, 0.5);color: white;z-index: 2;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: pre-wrap;word-wrap: break-word;}
.text-holder a,.text-holder a:link,.text-holder a:visited, .text-holder a:hover,.text-holder a:active {outline: none;color: #fff;text-decoration: none;}
</style>
<!--[if IE]>
<style type="text/css">
.text-holder {background:transparent;-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);zoom: 1;}
</style>
<![endif]-->
<script type="text/javascript">
var thumb_dimension={/*var_thumb_width*/width:218,/*var_thumb_height*/height:238};
/*var_num_col*/var num_col=3;
/*var_num_row*/var num_row=3;
/*var_fb_zoom*/var fb_zoom=false;
/*var_fb_title*/var fb_title=true;
/*var_fb_overlay*/var fb_overlay=true;
/*var_fb_title_pos*/var fb_title_pos="over";
/*var_fb_label*/var fb_label=1; // 0: none, 1: always, 2: roll-over
/*var_animation_time*/var animation_time=1000;

/* don't change this script line */
var top_doc;var current_page=0;var total_page=1;function getparentID(){var a="";if(window.top.document == document){return a}var ifs = window.top.document.getElementsByTagName("iframe");for(var i = 0, len = ifs.length; i < len; i++) {var f = ifs[i];var fDoc = f.contentDocument || f.contentWindow.document;if(fDoc === document) {a = f.id;}}return a}function pageselectCallback(d,c){openlink(d);return false}function openlink(b){if(b!=current_page){$("#photolists").jcarousel("scroll",b+1);current_page=b}}function initPagination(){$("#Pagination").pagination(total_page,{callback:pageselectCallback,current_page:current_page,/*var_num_display_entries*/num_display_entries:9,num_edge_entries:0,items_per_page:1,/*var_prev_text*/prev_text:"Prev",/*var_next_text*/next_text:"Next"})}function load_css(g){var e=top_doc.getElementsByTagName("link");for(document_css_index=0;document_css_index<e.length;++document_css_index){var f=e[document_css_index];if(f.href==g){return false}}var h=top_doc.createElement("link");h.rel="stylesheet";h.type="text/css";h.href=g;top_doc.getElementsByTagName("head")[0].appendChild(h)}function mycarousel_itemLoadCallback(c,d){if(d!="init"){return}if(fb_label==1){$(".text-holder").show().stop().animate({bottom:0},animation_time/2)}if(fb_label==2){$(".page li").hover(function(){$(".text-holder",this).show().stop().animate({bottom:0},animation_time/2)},function(){$(".text-holder",this).stop().each(function(){$(this).animate({bottom:"-"+($(this).height()+10)+"px"},animation_time/2,function(){$(this).hide()})})})}initPagination()}$(document).ready(function(){top_doc=window.top.document;load_css("http://beyondiweb.comhttp://beyondiweb.com/fancybox/jquery.fancybox-1.3.4.css");var c=getparentID();var a=num_col*num_row;total_page=Math.ceil($("#photolists li").size()/a);for(var b=1;b<=total_page;b++){$("#photolists").append('<li><ul class="page" id="page-'+b.toString()+'"></ul></li>')}$("#photolists li img").each(function(h){var g=Math.max(thumb_dimension.width,thumb_dimension.height);$(this).wrap('<a rel="fbgallery_group" class="fb_photo" href="'+$(this).attr("src")+'" alt="'+$(this).attr("alt")+'"></a>');var k=$(this).width();var l=$(this).height();if(k>=l){$(this).attr({width:Math.round((k*g)/l),height:g})}else{$(this).attr({width:g,height:Math.round((l*g)/k)})}var i="thumb-"+(h+1).toString();var e=Math.ceil((h+1)/a);if(((h+1)%a)%num_col==0){$(this).parents("li").addClass("lastcol")}if(Math.ceil((h+1)/num_col)==(num_row*e)){$(this).parents("li").addClass("lastrow")}$(this).parents("li").attr("id",i).appendTo("#page-"+e);if($(this).attr("alt").length>0){$(this).after('<p class="text-holder">'+$(this).attr("alt")+"</p>");var j=$(this).parents("li").find(".text-holder");j.css({bottom:"-"+(j.height()+10)+"px",width:thumb_dimension.width-(parseInt(j.css("padding-right"),10)+parseInt(j.css("padding-left"),10))+"px"})}$(this).addClass("thumb").thumbs().css("cursor","pointer").show()});$("a.fb_photo").fancybox({widgetID:(top_doc!=document)?c:"",titleShow:fb_title,titlePosition:fb_title_pos,titleFromAlt:true,overlayShow:fb_overlay,overlayColor:(fb_title_pos=="outside")?"#000":"#777",overlayOpacity:(fb_title_pos=="outside")?0.9:0.7,transitionIn:fb_zoom?"elastic":"fade",transitionOut:fb_zoom?"elastic":"fade"});$("#photolists").jcarousel({visible:1,size:total_page,animation:0,scroll:1,buttonNextHTML:null,buttonPrevHTML:null,itemLoadCallback:mycarousel_itemLoadCallback})});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div id="photo-fbgallery-tbpage"><div id="photonavi"><ul id="photolists" style="list-style:none; margin: 0;padding: 0;">
<!--begin to insert contents-->
<li><img class="center-focus" src="http://www.moonsharing.com/Progetti_Grafici_2/MoonSharing_Elegant.jpg" width="595" height="842" alt="MoonSharing_Elegant" /></li>
<!--end to insert contents-->
</ul></div><div class="pagination_container"><div id="Pagination"></div></div></div>
</body>
</html>
-->


Last edit 12 years ago
User: Roddy 12 years ago
You would need to either publish the page with the FancyBox on it so that I can look at the code or point me to the site from which you downloaded the code.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul C. 12 years ago
Here's the code, attached.

(or here https://dl.dropboxusercontent.com/u/15534954/FancyBoxTest.html )

Last edit 12 years ago
User: Roddy 12 years ago
There's a slight flaw in this forum whereby you can't publish code!

You can use this site to convert it…

http://www.freebits.co.uk/convert-html-code-to-text.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 12 years ago
I have modified the CSS file for you. Click HERE to download it.

Replace the original with this new one.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul C. 12 years ago
Thank you, Roddy. But the files on the Html page are:

/jquery/1.7.1/jquery.min.js
/jquery.pagination.js
/jquery.jcarousel.min.js
/jquery.thumbs.js
/jquery.mousewheel.min.js
/jquery.fancybox-1.3.4.min.js
/jquery.easing-1.3.pack.js

and your file is:
/jquery.fancybox-1.3.4.css

What should I substitute?

Last edit 12 years ago
User: Roddy 12 years ago
These are the javascript files. You must also have a link to the stylesheet and all the images that are required for the slider controls etc.

I downloaded a folder - jquery.fancybox-1.3.4 - to get the stylesheet. All the required files are in that folder including the stye sheet and images.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul C. 12 years ago
Sorry for the misunderstanding, Roddy. I've substituted the right CSS now, but the menu effect remains the same. Maybe this instruction in the new CSS could be the cause?

#fancybox-title {
font-family: Helvetica;
font-size: 12px;
z-index: 1102;
}

( http://www.moonsharing.com/all_sets/fancybox/jquery.fancybox-1.3.4.css )

Last edit 12 years ago
User: Roddy 12 years ago
The comments don't effect the code.

Can you publish the page to a server so that I can see the code? I working blind without seeing the source code for the whole page.

Have you published the site to a local folder?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul C. 12 years ago
Yes, Roddy, I was talking about the z-index: 1102 that seems a different range from the others z-index in the CSS code.

I can't publish to a folder 'cause this option is greyed out in EverWeb.
User: Roddy 12 years ago
Change the z-index to 11002.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul C. 12 years ago
empty

Last edit 12 years ago
User: Jumbo T. 12 years ago
It suffice to just post a clickable link to the page.

And perhaps a sample file with a few image would do. Loading MegaTons of images is rather a waste of everything.

BTW the page on dropbox is a widget-markup file from iWeb. Why not post an everweb page.


Post Reply
You must login or signup to post.