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
Related
I hit a problem on a website i was doing for work: http://www.dotcomholdings.co.za
the portfolio page has a gallery but the lower images open the lightbox at the top of the page instead of at the users location. i already mailed the themes developer for support but wanted to know in case i need to do this on another site, using jquery how would you set something like this to open at the place you are at on the page? i would like to use jquery but also is there a css property to do the same thing?
Thanks
I'm struggling to set up a highslide gallery to work like the one here: http://www.roadrash.no/hs-support/gallery-in-page+caption-above-thumbstrip.html
However, there's a problem that the example on the page above is a popup window that is placed above everything else in a page.
I want to place the gallery inside a page, without any z-indices, absolute positions etc, so that my highslide gallery would look like here: http://www.theinsider.ua/multimedia/543ce96463688/#1
Anyway, right now it seems like there's no way to do this with highslide. Am I mistaken?
This is what's known as an "in-page gallery." See the barebones example:
http://highslide.com/examples/gallery-in-page.html
The example from RoadRash's site is also an in-page gallery. It is not a popup that floats above everything else on the page. Here's an example from RoadRash's site that has three in-page galleries on a page of ordinary HTML. There are no popups, and no modal windows:
http://www.roadrash.no/hs-support/3galleries-in-page.html
A regular Highslide JS popup looks like this:
http://highslide.com/examples/mini-gallery.html
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've just noticed that javascript elements aren't working correctly on the website. They are working, however, they only work on one page, and not site-wide.
http://www.radonsystems.net
Javascript elements, such as menu hovering, work on that page. Additionally, so does the jQuery fancybox [click on live chat].
No go to http://www.radonsystems.net/business/profile.2, notice that the menu hover and live chat fancybox doesn't work.
Any ideas?
Ok, looks like removing a script breaks it up. Have to split up the javascript in the header.
If you visit here: http://www.egyptevakantie.nl/dahab, click on the "andere plaatsen" tab, and then click on an image it brings up a magnified image, courtesy of the jQuery lightbox plug-in.
However, if you do the same here http://www.egyptevakantie.nl/dahab?rhys=yes (essentially the same site except for a couple of stylesheets and one or two minor html changes, none of which are in close proximity to the images) the lightbox fails. Instead of overlaying the content the lightbox is appended to the bottom of the page, where it is also displayed weirdly.
So far in debugging I've managed to work out that the plug-in still calculates the correct left and top values for where to place the lightbox, but by the time the dhtml is generated the top value has changed completely.
Does anyone have any idea why this is happening?
I think you are missing the jquery lightbox stylesheet file.
in the first page there is a reference to this css file:
/css/jquery.lightbox-0.5.css
but on the second link there is no reference to this file.
this css file is included in the jQuery lightbox download located here:
http://leandrovieira.com/projects/jquery/lightbox/
If image is appended at bottom page, for sure postion:absolute is not set.