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.
Similar Messages
-
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. -
Tinypic images not loading on iphone on message board posts?
All tinypic images are appearing as blues quare question marks. Was never a problem before. iPhone 4 iOS 5.0.1. Tried viewing pages on Safari and Mercury. Neither load the images. Can anyone help?
that is so strange, i had the location "image/rotator/......" for all three of my images in the js file and only the third one works?
i believe they are all loading up fine as of this moment, just like they were yesterday, but not this morning when i first arrived at work. i wonder what changes the location by itself.
hopefully the same thing won't happen again.
as for the text problem, thanks for pointing that out, i really appreciate it! but our office has been quite understaffed for a while, and no one here really knows anything about web maintenance. hopefully someone will fix those problems some day.
thanks again bregent! -
Google Images not working on iPhone safari (3GS, 5.1.1)
I have run into a small bit of trouble with my iPhone's Safari Browser. For some reason, Google Images is not allowing me to open images of go to the next page of images.
Example: I run "Lotus" (as in the automobile) into Google and click images. It shows the thumbnails of the sportscar, but when I click on any thumbnail, it does not open like it normally would. When I hold down onto the thumbnail, it gives me an option to save the image of copy it, not open it.
Also, when I go to the page over arrow to see the photos on page two, it does not move from page one no matter how many times I click it.
I have cleared the cache, cookies and history from the device, powered off and on the phone, switched between private browsing and back again and no change.
It had been working fine up until the update the other day.
Any suggestions on how to remedy this problem?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. -
ImageView with transparent image not clickable
I created an ImageView with an image with transparent portions. I also did some scaling and moving, which I though might cause this effect, but that is not the case. When I click on the transparent portion of the image the onMouseClick event is not fired. Other mouse events (mouse enter, mouse move, mouse exit, ...) get fired. Only when I click on the non transparent part the click event is fired.
Image img = new Image(getClass().getResourceAsStream("barrel_icon.png"));
ImageView view = new ImageView(img);
view.setScaleX(0.5);
view.setScaleY(0.5);
view.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent mouseEvent) {
System.out.println("Clicked on the scaled icon");
StackPane root = new StackPane();
Group group = new Group(view);
group.setManaged(false);
group.setLayoutY(-13);
group.setLayoutX(-13);
root.getChildren().add(group);
The area between the barrel and the shadow belongs clearly to the image, however is transparent.
I am wondering if there is a reason for this behaviour and what is the best way to work around this issue, as my image has large transparent portions and the non transparent parts are hard to click on.
By the way this is all based on JavaFX 2.2.
Regards
HotzstFor future reference here is the workaround I have come up with:
public class TransparentImageViewClickableArea extends Rectangle{
private final ImageView imageView;
public TransparentImageViewClickableArea(ImageView imageView) {
super(imageView.getLayoutX(), imageView.getLayoutY(), imageView.getImage().getWidth(), imageView.getImage().getHeight());
setOnMouseReleased(imageView.getOnMouseReleased());
this.imageView = imageView;
bindBounds();
private void bindBounds() {
DoubleBinding layoutXBinding = new DoubleBinding() {
super.bind(imageView.layoutXProperty(), imageView.scaleXProperty());
@Override
protected double computeValue() {
final double imgWidth = imageView.getImage().getWidth();
final double actualWidth = imgWidth * imageView.getScaleX();
double diff = imgWidth - actualWidth;
return imageView.getLayoutX() + diff/2;
layoutXProperty().bind(layoutXBinding);
DoubleBinding layoutYBinding = new DoubleBinding() {
super.bind(imageView.layoutYProperty(), imageView.scaleYProperty());
@Override
protected double computeValue() {
final double imgHeight = imageView.getImage().getHeight();
final double actualHeight = imgHeight * imageView.getScaleY();
double diff = imgHeight - actualHeight;
return imageView.getLayoutY() + diff/2;
layoutYProperty().bind(layoutYBinding);
widthProperty().bind(imageView.getImage().widthProperty().multiply(imageView.scaleXProperty()));
heightProperty().bind(imageView.getImage().heightProperty().multiply(imageView.scaleYProperty()));
It is not a perfect solution, as it does not consider the case that the image might be changed as well. This however could be improved easily but was not necessary in my use case. -
OS4 background image not available for iPhone 3G??
Hey everyone, just installed iOS4 and it deleted all my contacts :((((
but I can't see how to use a background pic for the standard screen, like it was featured in the keynote video...is this feature not available for us lesser iPhone 3G users???{quote:title=gdgmacguy wrote:}Has absolutely nothing to do with marketing policy, rather the particular hardware capability of the phone.{quote}
that is absolute bs. iPhone 3g can support it fine. Apple just doesn't want to give its 'old' customers any eyecandy, or rather, apple doesn't want to give anyone anything they ask for. Seriously, how long will it take so we can change the text bubbles from aweful silver and baby poop green? -
The hyperlink and number not clickable
The hyperlink and number not clickable in iPhone 4 text massage
Do you have that problem when running in the Firefox SafeMode?<br/> ''A troubleshooting mode.''<br />
1.You can open the Firefox 4.0 SafeMode by holding the '''Shft''' key when you use the Firefox desktop or Start menu shortcut. <br />
2. Or use the Help menu item, click on '''Restart with Add-ons Disabled...''' while Firefox is running. <br />
''To exit the Firefox Safe Mode, just close Firefox and wait a few seconds before using the Firefox shortcut to open it again.''
If not, see this: <br />
http://support.mozilla.com/en-US/kb/troubleshooting+extensions+and+themes -
Image hyperlink not working in iphone mail
Hello,
I have created an HTML email and have sent it using Outlook from a Windows PC. The HTML email contains a JPEG that has a hyperlink assigned to it. When I check my email on my iphone and touch the JPEG, it wants to download the image, but does not click to the URL. An Android phone works fine. Any suggestions as to why this is happening?
Here's a snippet of the code involved:
<td><a href="http://www.ecallis.com/Proofs/ProEnergy/powergen_2012_invitation/index.html" target="_blank"><img src="images/videostillscreen2.jpg" width="320" height="193" border="0" /></a></td>
Thanks,
LindaI discovered this only happens in the iPhone email app when using embedded images. If the images are embedded the iPhone wants to save the image when you click on it. If the images are not embedded (i.e. somewhere on the internet) then the links work fine when clicking on the image. HTH
-
How do I tell iphoto NOT to load ALL images from camea and iphone, only new images?
I've bee using my MacBook Pro, iphoto and Nikon for many years. I travel alot and take many pictures, and like to keep them on the memory cards as an extra backup. All was going great on a recent trip, until one day, suddenly, when I plug camera into computer, iphoto opens (as usual) but it starts downloading ALL of the old images on the memory card instead of just the ones that have not already been imported! It takes forever when you are using a 16GB card!! Is this due to some update I installed? How do I tell iphoto not to do this?! I only want to see images not yet imported, as it used to be. I am using OS X 10.6.8 and iphoto '09 - 8.1.2 And, this same thing is happening with my iphone, and my other camera.
iPhoto does read all images (how else can it know if it has already imported them or not) and then gives your oppertunity to import new, all or selected
Yes it does take a bit to get all images and see what needs to be imported - I use 32 GB cards - and the other issue is that if you delete impoprted photos next time you use the card the deleted ones will be in the new list so you have to select the rest and import selected - I've found no solution to this
LN -
My Mac Mini (v10.6.8) does not acknowledge my iphone as a device in iPhoto, Image Capture, iSync or Preview although, iTunes does. I am at a loss for importing photos other than emailing them to myself. Same problem with my iphone 4, iphone 4s, ipad2 and New iPad. Is this a problem with OS X 10.6.8 as I read some posts claim? Please help.
I was able to import photos in iPhoto and Image capture when I was running SL 10.6.8 on my older MacBook.
Did you try quitting everything, restart the Mac and then try again?
Are there any updates at all for the Mac? I was helping one user not all that long ago and there were updates for her Mac software that had nothing to do with the OS and when she downloaded the updates - the iPad was then recognized in iTunes. -
I have updated my iphone this evening and is has asked me to connect my phone to itunes, I connected it to a computer with itunes and it says it needs restoring? and all my images etcwill be earsed I need help as I have not backed my iphone up previously please help?
YOur phone is in recovery mode, any data that was on there is already gone, you will have to restore your phone and use whatever backup you to restore to.
-
Image capture will not recognise my iPhone?
Image Capture on my iMac with Snow Leopard, does not recognise my iPhone when I attach it. I have tried the same phone with a MacBook Pro without a problem. The Image Capture software is the same version on both computers. Can anyone help?
ChrisHey Itsalsome!
Here is an article that can help you address this issue with your iPhone:
iOS: Unable to import photos to computer
http://support.apple.com/kb/ts3195
Thanks for using the Apple Support Communities!
Cheers,
Braden -
Background image not displaying 100% width of iphone
Hi I am getting some strange behaviour on my iphone using firefox but displaying perfectly in firefox on computer. I do not wish to submit the name of site as I do not want it to show up in search results but if anyone can help me I will pm site address. Thanks.
As the header's width is 100%, why is there the need for margin: 0 auto or text-align:center? Surely the background image should just display to 100% of the screen? Then the actual logo image that sits in the header div should have text align and margin auto yes? I know that applying these rules this way does not center the logo within the div but WHY? I have uncommented out the text align and margin auto on the header div and it displays properly on my computer but not on the iphone.
With regards to iphone the background image stops short of the logo by a small amount, I have not designed a separate style sheet for iphones, not part of the scope but as the rest of the pages display ok why does the background image stop just short of the logo image?
I really appreciate your input.
This is the CSS
#header {
width:100%;
height:117px;
padding: 0 0 0 0;
/* text-align:center;
margin:0 auto;*/
background:url(images/header-bg2.jpg) left repeat-x;}
#header a img {
border:none;
padding:0;
margin:0 auto;
text-align:center;}
<div id="header">
<a href="http://www.xxxxxxxxxxxxxxx.com.au"><img src="images/KPS-logo.png" width="1024" height="117" alt="xxxxxxxxxxx Logo" /></a>
</div> <!--END of header-->You have nothing defining your background image size, just the box that holds it
try adding some CSS to control the actual background image...
background-size:cover;
background-position:right top;
background-repeat:no-repeat;
background-atachment:fixed; -
Why aren't the images in NOTES syncing to iPhone and iPad?
In Mountain Lion we can now include images and such in our notes. Should they sync to our devices as well???
I'm only seeing a paperclip icon on iPhone and iPad. Also there seems to be no way of viewing the image indicated by the paperclip. There is also no way I can find to insert an image into a note on the iPhone or iPad so this lauded feature seems a bit redundant.
-
the wifi is faded and is not clickable. It says no wifi. Its just not clickable
See http://support.apple.com/kb/TS1559.
Maybe you are looking for
-
Not able to create a new listener
Tried to create a new 11g grid infrastructure standalone and it failed at configuration assistant and thereby asm was not created. I tried the netca manually to create the listener but not giving the error " the information provided for this listener
-
DVD Player Recognition and Connection
When I insert a DVD into the built-in Toshiba DVD Player in my laptop, a message comes up saying that the drive is not found or recognized. It is not listed in the device manager listing in the Control Panel either. How do I get this drive recogniz
-
Insert link to previous slides in a quiz
Hello, I am working on a quiz including questions and reference links. We can only add a link to open an external document or file instead of going back.. But we would like our learners to click on the link to go back and review the previous slides i
-
Browse which project to import files too
Hi, I'm starting to do a lot digitizing of old photos/negs and have created projects by year for my organiztion structure. Currently I import to a temp dir and custom name each month then move the pix to the right project and then album. It'd be
-
Problem has got worse since upgrade to latest version. System hangs with message Firefox (not responding).