WordPress Lightbox Conflicts and Solutions

Recently we developed a custom WordPress site for a client that has an integrated lightbox image gallery. It was an easy plugin installation and activation process. The next step was to add in the images to the media library and then call the shortcode inside the code dialog in the specified page. Everything looked great on thumbnail preview, but when clicking on one to view a larger version the lightbox would not show up. The larger image would preview in a separate window.

First, is to check to see if the lightbox version works together with the WordPress installation and custom theme. WordPress notifies of any updates. Second, check to see if any of the plugins are not compatible with the lightbox plugin, by checking one at a time. If any of them are not compatible, it’s good practice to notify the plugin developer, so they can try to work out a solution for future versions. Third, is to check against any custom codes to see if anything is conflicting. In this particular case it happened to be a jQuery conflict on a particular plugin. By updating these conflicting files it allowed the lightbox to work properly.

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2016-11-18T14:24:46+00:00 March 20th, 2012|Cascade CMS|Comments Off on WordPress Lightbox Conflicts and Solutions

Notes from the field.

I attended a Webinar hosted by Vortx recently and had a chance to learn a few things that can affect conversions of shoppers.

1. 75% of shoppers use the search box to find products. They pointed out that the top 10 e-tailers all have the same style search box: a long narrow search box prominently displayed in the header.

2. You have 7 seconds to impact a shopper with the product detail, after that they will typically go to another product.

3. There are 3 main pieces of information shopper want to see quickly:

  • Product Image
  • Product Description
  • Pricing/ Add to Cart

These items need to be clearly defined and prominent. Add to Cart button should be above the fold and use a color scheme to draw the eye to it.

4. The use of tabs is fading, major e-tailers are no longer using them to convey information.

John Wallwork
John Wallwork is a Senior Systems Engineer. He has a BS in Chemistry and has taken graduate courses in chemistry and computer science at NC State University. John has over 16 years of IT experience and has the following software skills: VB, ASP, .NET, C, C++, XML, Delphi, SQL, Crystal Reports, VMS, Unix, MS Access, SQL Server
By | 2016-11-23T09:57:13+00:00 February 7th, 2011|Ecommerce|Comments Off on Notes from the field.

Firefox’s Site Identity Button

A client recently asked me why their e-commerce site displayed the message “This site does not provide identifying information” when clicking on or mousing over the “site identity” button in the address bar in Firefox.

Site Identity ButtonLocation of site identity button in Firefox

Message displayed by non-secure site Message displayed after clicking on site identity button (non-secure page)

This button is actually used by Firefox to check the security level of the page (http://support.mozilla.com/en-US/kb/Site%20Identity%20Button).  The color and message displayed is directly related to the SSL certificate state of the page (secure/encrypted vs. non-secure) and, in fact, displays an entirely different message on secure check-out related pages:

Message displayed by SSL secured site Message displayed after clicking on site identity button (secure page)

Though you can turn off this functionality on your own browser (http://www.kensfi.com/how-to-disable-the-annoying-this-web-site-does-not-supply-identity-information-pop-up), it is not possible to change the setting on the web site itself, since it is a security feature for Firefox.

By | 2016-11-21T17:58:22+00:00 February 1st, 2011|Web Development|5 Comments

Pre-launch testing

I’ve spent the last two weeks system testing a large ecommerce site that we are about to launch.  Testing is a vitally important phase of a project here at Beacon and something we don’t take at all lightly!  We usually build a minimum oftwo weeks into the time line for internal testing and two weeks for client testing, if the project plan can possibly accommodate it.

Don’t forget the following steps when doing your own site testing:

  • Test in multiple browsers— It is not good enough to view the site in the browser that you, or your developers, most prefer.  You MUST view the site as your customers will see it, and unfortunately different browsers (and versions of browsers!!) can produce massively different results.  Based on current browser statistics, Beacon currently system tests the entire site in Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox 2, Firefox 3, Opera and Safari.  Though Beacon tests the site with actual installs of each browser on separate computers, you can also consider using a browser emulator like Spoon.net, though be aware that the simulations aren’t always “perfect”.  For even more info on cross-browser compliance testing, please see my co-worker’s blog on the subject.
  • Test the site without Flash enabled— If your site uses Flash animation at all, you need to test how it will function without that plug-in enabled.  All Flash players should display a static image and warning to download Flash if it is disabled or an older version.
  • Test the site without JavaScript enabled— If JavaScript is required for your site to function correctly (make sure search engine bots will still be able to crawl it!), at least inform the visitor with a message if the browser detects that it is disabled.  javascript message
  • Test the print view of the site— It is always helpful to the visitor that wants to print a page of your site, if you provide them with a “print-friendly” view that doesn’t waste a lot of ink and paper on navigation, background images, etc. that they won’t need in a printed copy.
  • Make sure the logo in the site-wide header links to the home page– This has become an industry standard but is sometimes forgotten
  • Check for accessibility (minimally alt tags on all images) and 508 compliance, if required– Not all sites require these standards, but don’t abandon visitors that use non-traditional methods of browsing the web (like screen-readers)!  Use http://www.w3.org/WAI/ and http://www.section508.gov/ as guides.
  • Check to see if the order of tab entry in forms makes sense— Not all customers will use their mouse to click through a form.  Make sure that if they choose to use the “tab” key to navigate from field to field, that the order makes sense.
  • Make sure all external links and PDF files open in a new browser window– Don’t you hate it when you finally find the info you need on a site in a PDF and when you are done reading it and close, the site disappears?  Prevent this by always opening links to other sites and internal PDF files in a new browser window so that your site stays open in the background.

With these tips and, most importantly, devoting time and effort to testing, I hope that you will have a very successful site launch!

-Annette

By | 2016-11-18T14:25:01+00:00 November 24th, 2010|Cascade CMS|1 Comment
Load More Posts