Anyone have any experience using the thickbox jquery plugin? I have it setup correctly, but for some reason it doesn't load my pictures. It will even go as far as to fade out and process the loading bar, but the picture itself doesn't load onto the screen. I haven't modified the code and I followed the instructions... not sure what the disconnect is here.
any ideas?
see the example # http://www.dsi-usa.com/test/track.php click on one of the gallery links in the upper left and the loading bar just pops up and chills forever. any help would be appreciated.
There is an error in thickbox.js. If you change #rel to rel on line 79, it works.
But, don't use thickbox. It's own web page has advised against it for over 2 years:
While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.
colorbox
jQueryUI Dialog
fancybox
DOM window
shadowbox.js
-The Management. 9.30.2009 (and Paul Irish)
If you remove the rel attribute from the anchor (rel="product-gal") it works:
<a class="thickbox" title="DSI's Modular Mac Keyboard" href="imgs/track-gallery/modmac-l.png">
<img src="imgs/track-gallery/modmac-t.png">
</a>
Related
I'm working on a site that is using Highslide JS to create a slideshow window of larger product images when an image on the product page is clicked. I'm also using Piotr Rochala's fine jQuery plugin, slimScroll, as an alternative to ugly browser default scrollers on the same page.
The problem occurs when a product image is clicked, creating a new .highslide-controls div behind the slideshow that should only be in the top of the slideshow window. The div gets appended with each click, which I believe I've narrowed down to a conflict with the slimScroll script.
See: http://www.thelifeguardstore.com/newproductcart/pc/viewPrd.asp?idproduct=7409
I've attempted using jQuery's noConflict(), changing up the orders of when scripts are called, and looking at each script's JS code, but can't find exactly what's causing the problem. Although I have a feeling it's probably right in front of me, laughing maniacally.
Any help or clues as to what may be causing the issue is greatly appreciated.
I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.
Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.
You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox
I'm looking for an example that shows how to display an image as an overlay in a browser while blurring/greying out the contents from the main browser window, here's an example...
http://fstopgear.com/product/satori-exp/view
Just click on any backpack image, then click any part of the browser to close the image..that's pretty much the functionality I'm looking for, I'm assuming there's a script or package that provides such control?
There are plenty of solutions as jQuery plugins for this. What you want is called "modal" or "overlay" window.
I recommend FancyBox: http://fancybox.net/
But also check out ColorBox: http://www.jacklmoore.com/colorbox
There are lot of solutions to get this done in jQuery. Please have a look into the following url's:
http://leandrovieira.com/projects/jquery/lightbox/
http://jquery.com/demo/thickbox/
http://fancyapps.com/fancybox/#examples
BBC slider works even if javascript off, how they do that? http://www.bbc.co.uk/ - you will see that it still works if you turn off javascript
Thanks
They're using progressive enhancement. The left and right arrows on the main carousel are normal links with a CSS hover class:
<a id="dz-arrow-previous" href="?dzf=default&focusedpane=center">...</a>
<a id="dz-arrow-next" href="?dzf=default&focusedpane=left">...</a>
If JavaScript isn't enabled, clicking them moves you to the next page by following the link (without a sliding effect, at least on Chrome; CSS transitions could probably be used). If JavaScript is enabled, they hook clicks on the elements and do the nifty carousel thing.
There's nothing clever going on - it just falls back to sending a request to the server if Javascript is unavailable. If you click a link with Javascript unavailable, you're effectively getting a new page from the server - watch the URL change as you do it.
I've got the same problem with this post:
How to fix flickering in IFrames?
Unfortunately, there's no solution (and I'm afraid of negative ratings too :) ).
I can't provide a page where you can see the behaviour (as it's intranet) - but I'll try to explain it:
When I open an external page via lightbox, I get a disturbing 'flickering' when clicking on links... i.e. I try to open an image gallery located on an internal server - clicking on the "next" link lets the page flicker before moving on to the next page.
If I open any other web page (google, some newspaper, ...) I do not get this behaviour - it's much faster, so it seems like the content of the first page is replaced by the content of the next one. In my image gallery it's much slower: the first page disappears, then the next page appears. I get this flickering only with lightbox-popup, not, if I load the page in another window.
I tried differend JavaScript frameworks (jQuery, Scriptaculous, Standalone) - so I guess it's my image gallery which causes this behaviour... any ideas?
It would be really (!) appreciated... thanks!
Best regards,
Stefan
As Max mentions, source would be useful.
Also, try using Fiddler or Firebug's Net panel to look at the actual HTTP requests that are being made - perhaps your image gallery is POSTing to itself before redirecting to another page?