Only display visible images in Shadown box (hide images where opacity:0)

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Only display visible images in Shadown box (hide images where opacity:0)

gearu
I am building a wordpress website. I am implementing isotope for image layout and filtering (isotope.metafizzy), and then using Shadowbox to show larger versions of the images when clicked.

THE ISSUE:
Currently, when i open an image in the shadowbox, it loads ALL the images in the series, including images which are currently hidden (filtered by Isotope). Isoptope appears to use opacity: 0; to hide the images - is there a way for sahdowbox to recognise this, and only load the opacity:1; images into the box? (so that when I navigate using next, that i only loop through the images which were visible when i loaded the page?

NOTE: I am using the Shadowbox JS wordpress plugin.

Any help would be greatly appreciated. My Javascript coding skills are marginal at best! Preferaly I would like a solution which does not involve me needing to rebuild the shadowbox code (if possible)

Reply | Threaded
Open this post in threaded view
|

Re: Only display visible images in Shadown box (hide images where opacity:0)

gearu
bump
Reply | Threaded
Open this post in threaded view
|

Re: Only display visible images in Shadown box (hide images where opacity:0)

gearu
In reply to this post by gearu
ok, so I am not attempting to get this done. As per the original post, I am using some javascript filtering to hide/show images based on a class tag.

The javascript hides images, however, the shadowbox navigation still "see's" the hidden images, so when i click next i start to see hidden images, and not just the images in my filtered list.

Can anyone assist with suggestions on how to modify shadowbox to only see the images in the filtered list?

I have  apreview version of my website up here (almost complete and ready for launch now!) This is one of the last few bits of functionality that i need to get working.

Any help would be hugely appreciated.

http://www.preview.imageworkshop.com/portfolio/
Reply | Threaded
Open this post in threaded view
|

Re: Only display visible images in Shadown box (hide images where opacity:0)

arttronics
I looked at your source and noticed that you have two id's in one DIV:
<div id="isotopegallery" class="photos clearfix" id="ngg-gallery-17-71">

Shadowbox will include anything while it's showing a gallery if those particular items have the gallery name attached to Shadowbox (or in your case Lightbox) rel attribute. If your seeing something in the Shadowbox gallery that you don't want, just remove or change the gallery name for that Shadowbox item.

If you need further assistance, you might want to list the class name that's hiding the Shadowbox images and provide an image name that is not suppose to be included in the gallery along with an image that is suppose to be part of the gallery.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: Only display visible images in Shadown box (hide images where opacity:0)

gearu
i managed to fix this in the ISOTOPE javascript, by clearing the cache after each filter and this has solved my problem. thanks for your help
Reply | Threaded
Open this post in threaded view
|

Re: Only display visible images in Shadown box (hide images where opacity:0)

arttronics
To ensure your website is functional in all browsers, you should fix those two ID's and also every lightbox call you have for your HTML5 page has a registration error.

Feel free to look into this.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: Only display visible images in Shadown box (hide images where opacity:0)

gearu
i will fix those 2 id's, as that is a mistake.

Would that be what is causing the HTML5 registration error? I am just using the standard lightbox thing that is added with the shadowbox-js plugin?

How do I fix that registration error?
Reply | Threaded
Open this post in threaded view
|

Re: Only display visible images in Shadown box (hide images where opacity:0)

arttronics
This post was updated on .
The HTML5 registration error is the implementation of the rel attribute.  It's handled differently for HTML5 rendered webpages. I haven't moved on to designing HTML5 specific pages to advise you.

It's important to plan on which DOCTYPE you need to use, and base your markup on that.

I would use HTML 4.01 Transitional unless you have a reason not to. The rules have changed for DOCTYPE HTML5, but if it's what you require then you'll need to adhere to new standards.

The W3C is a great resource in not only catching errors, but it can offer solutions to the errors it finds via checking a online URL, file upload, or pasting in your markup.

EDIT: Here's a great primer on HTML5 that I added to my own favorites.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: Only display visible images in Shadown box (hide images where opacity:0)

Doug
In reply to this post by gearu
How did you clear the cache after each filter?  Page reload?