Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Lightbox display not working

Participant ,
Nov 07, 2016 Nov 07, 2016

Does anyone know why the Lightbox display is not working on the following page:

Doormats & More - Detail Page

I have all of the .js. & .css files attached - I have the rel="lightbox" attached to the rows of thumbnail image links - but the scripting does not pull up the lightbox display

I have used this feature on several sites before & have it set up in the same way, as far as I can tell so I am stumped...

Thanks.

726
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 07, 2016 Nov 07, 2016

You still have not fixed your code errors.  There's no point in trouble shooting other problems until you take care of these first.

Showing results for http://www.doormatsandmore.com/DMM-Bootstrap/Detail_Page_R5.html - Nu Html Check...

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 07, 2016 Nov 07, 2016

Have a look at Lightbox

4. Make sure jQuery, which is required by Lightbox, is also loaded.

  • If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
  • If you are not currently using jQuery, I've created a packaged file that includes both Lightbox and jQuery. Include dist/js/lightbox-plus-jquery.js instead of lightbox.js.
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 07, 2016 Nov 07, 2016

Doormats & More wrote:

Does anyone know why the Lightbox display is not working on the following page:

Doormats & More - Detail Page

I have all of the .js. & .css files attached - I have the rel="lightbox" attached to the rows of thumbnail image links - but the scripting does not pull up the lightbox display

I have used this feature on several sites before & have it set up in the same way, as far as I can tell so I am stumped...

Thanks.

Makes no sense to me - you're using a resposnsive design and an unresponsive lightbox.

I would'nt waste time on this lightbox solution unless you know how to make it responsive.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 07, 2016 Nov 07, 2016

osgood_ wrote:

I would'nt waste time on this lightbox solution unless you know how to make it responsive.

The lightbox is already responsive.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 07, 2016 Nov 07, 2016

BenPleysier wrote:

osgood_ wrote:

I would'nt waste time on this lightbox solution unless you know how to make it responsive.

The lightbox is already responsive.

Not this one that you linked to though?

Lightbox

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 08, 2016 Nov 08, 2016

Doormats & More wrote:

Does anyone know why the Lightbox display is not working on the following page:

Doormats & More - Detail Page

I have all of the .js. & .css files attached - I have the rel="lightbox" attached to the rows of thumbnail image links - but the scripting does not pull up the lightbox display

I have used this feature on several sites before & have it set up in the same way, as far as I can tell so I am stumped...

Thanks.

Something not quite right about your current lightbox js and css files, not sure where you got them from.

If you follow the instructions on the plugins page for the script it works.

Add the following 2 lines of code AFTER the link to your jQuery library at the bottom of your page:

<script src="http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>

<link rel="stylesheet" href="http://www.lokeshdhakar.com/projects/lightbox2/css/lightbox.css">

Delete these 2 lines of code at the top of your page which link to the 'lightbox.js' and 'lightbox.css' :

Change rel="lightbox" on all the <a> tags to:

data-lightbox="example-set"

Then it works.

Not sure what Ben is refering too but unless my eyes are decieving me this lightbox solution is NOT responsive. Its not been updated in a while according to the link to the page that Ben provided.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 08, 2016 Nov 08, 2016

My apologies for having been too subtle for you. What my answer was eluding to is the fact that JavaScript requiring jQuery to function, was loaded before the jQuery library.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 08, 2016 Nov 08, 2016
LATEST

BenPleysier wrote:

My apologies for having been too subtle for you. What my answer was eluding to is the fact that JavaScript requiring jQuery to function, was loaded before the jQuery library.

AFTER I think you mean. No I understood loud and clear what you where refering to on account of loading the jQuery library before the lightbox.js BUT if you did you homework it still does not work - there is something else wrong with the set up.

Also the lightbox is not 'truely' responsive I edited my last post to include the below but as you had already posted the edit was not allowed.

'Ok I see what is going on now - the lightbox is only responsive on the device you are viewing on. If I narrow the browser window on desktop the lightbox window remains the same width it was when initially opened...........humm  a little annoying perhaps so it would kill it for me. If you check out Fancybox fancyBox - Fancy jQuery Lightbox Alternative

  that's what I'd expect a true responsive lightbox to do - to re-act to the narrowing/widening of the browser window.'

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines