lightbox opens and resized but the image is not appearing

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

lightbox opens and resized but the image is not appearing

shani
I am trying to use shadowbox.
it works great on chrome but on safari and firefox i see only the black background but the image itself is not shown. when i move to the next picture is see that shadowbox recognizes the size of the image and resize itself but still the image is not shown.

BTW
When i changed the handleOversize: from "resize" to "drag". the image on safari&firefox appeared when i started dragging the black canvas.

Any Help
Thanks
Shani

Reply | Threaded
Open this post in threaded view
|

Re: lightbox opens and resized but the image is not appearing

arttronics
BTW, where is your markup?

You can paste it into the Message Box and "mouse" select it, then from the menu choose More options and click Raw text.

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: lightbox opens and resized but the image is not appearing

shannoga
Sorry but i did not understand your answer
You can see the temp page in -

www.elengalit.co.il/gallery.html

maybe it will be more clear

Thanks again
Shani
Reply | Threaded
Open this post in threaded view
|

Re: lightbox opens and resized but the image is not appearing

leon.vandepavert
Hi Shani,

I just had a look and it seems that your image inside the shadowbox has  style="position: absolute;"
Have you tried changing it to  style="position: relative;" or removing the style attribute?

Cheers,
León
"A good framework gives the developer the opportunity to concentrate on the tasks at hand, rather than the way it works"
Reply | Threaded
Open this post in threaded view
|

Re: lightbox opens and resized but the image is not appearing

arttronics
In reply to this post by shannoga
Thanks for providing your markup via the provided link.

Unfortunately there are numerous HTML and other basic errors in your markup as indicated by W3C Validation Tool for your HTML5 page.

I do see that the Facebook link shows the Shadowbox Title with your online font, so your custom shadowbox.css is functioning okay. For that FB Shadowbox.setup you have, it should be changed to a regular function and use Shadowbox.open since you want to specify contents.

All the other images have several classes each, and I do not see your HTML page using Shadowbox rel attribute since you have defined that with Options in the HEAD section.

My opinion: Remove the class=Glamour-Grey and use Shadowbox rel attribute.

Shadowbox rel example:
<a href="images/gallery/g-1-2.jpg" rel="shadowbox" class="single-image l part" title="תיאור התמונה."><img src="images/gallery/g-1-2-tbw.jpg" ></a>

However, the above markup may still not function for issues caused by the remaining three classes you have in there.

Note that the img attribute does not have a proper closing tag.

You can also browse the online Examples for proper markup usage to help you understand Shadowbox.

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: lightbox opens and resized but the image is not appearing

arttronics
In reply to this post by leon.vandepavert
@ leon.vandepavert

The image inside Shadowbox does indeed have style="position: absolute;" since that is normal for the Shadowbox IMG Player.

I hazard you used Inspect Element and noticed this, but it's also seen on the examples at the Home Page.

Removing or changing that setting would break Shadowbox.

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: lightbox opens and resized but the image is not appearing

leon.vandepavert
Aha, I see.

Thanks for your insight arttronics.
I merely thought it was a style issue.

"A good framework gives the developer the opportunity to concentrate on the tasks at hand, rather than the way it works"
Reply | Threaded
Open this post in threaded view
|

Re: lightbox opens and resized but the image is not appearing

shannoga
In reply to this post by arttronics
Hi

Thanks for your reply and for the link to WC3
I fixed the issues:
now there is only 1 class and there are no HTML Errors (except of "Bad value shadowbox for attribute rel on element a: Keyword shadowbox is not registered. " that i assume as o.k)

I will appreciate if you could have a second look. pay attention that when you try ti drag the center of the BG the image suddenly appear.

I relay want to use your script as it the smoothest i found.

Thanks a lot
Shani
Reply | Threaded
Open this post in threaded view
|

Re: lightbox opens and resized but the image is not appearing

dataload

Hello Shannoga. I wouldn't worry about the multiple classes on the images since it's valid markup (and often quite a useful technique) and won't cause any issues for the Sizzle selector engine if that's how you want to setup your shadowbox.

The issue with the images not appearing is due to the right-to-left direction property you have set on your body tag:

body {
font: 100% "NarkisBlockMF",Arial, Helvetica, Geneva, sans-serif;
color: #2A1606;
direction: rtl;
}

Try adding a left-to-right style to sb-container in shadowbox.css:

#sb-container {
position: fixed;
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 999;
text-align: left;
visibility: hidden;
display: none;
direction: ltr;
}

You might want to set it back to rtl for #sb-title if you intend to use titles for your shadowboxes but this should at least get your images displaying correctly.

Reply | Threaded
Open this post in threaded view
|

Re: lightbox opens and resized but the image is not appearing

shannoga
HI

Thanks a lot
that fixed it


Shani