Lightbox Locations - javascript

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

Related

Display pdf document on website (mobile friendly) with vue.js

I'm working with vue.js, and I want to display a pdf on a website. I keep seeing a lot of complicated examples of pdf viewers that require an upload button and a conditional display - this is NOT what I need.
I just need to display a hardcoded pdf document within a div on my web page.
This is what I have so far using iframe
I need the width of the actual pdf page to fill up 100% of the width (for legibility). I don't want the grey background to show. The page should also be mobile friendly.
Open to suggestions that include not using iframe, especially if it would make the page more mobile friendly. If you're going to bring up vue-pdf or PDF.js, please include some clear instructions on how to use them.
PS: I am using some parameters to remove the toolbar and navpanes like so:
src="<MY PDF HERE>.pdf#toolbar=0&navpanes=0&scrollbar=1"
I've tried adding &zoom=100 or &view=Fit and that does not fix my problem.
Here is a list of all the parameters.
I lied. Adding &zoom=140 to the end of my pdf url solved my issue.

Highslide: how to make the gallery work directly in the page, not in a popup or modal window?

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

How do I use javascript to make my URL reflect site navigation? And also be linkable?

My website uses a single page, which loads all its content in iframes, and I would like to know how I can make the page URL change when each piece of content is viewed.
Then I would also like these URLs to work as links to the content.
Here is my site:
http://www.dosed.co.uk
If you click any project, you'll see what I mean. I want to be able to link someone to a specific project (so something like "http://www.dosed.co.uk?project=fish").
How can I do this with javascript?

Changing content of a fancybox with ajax

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

JS gallery page loading differently from main site JS gallery page

My goal is to link to photo galleries directly on a web page that uses a Jquery’s “Animate” and JS/CSS. The page in question is witold.org (click on either photo to go to a gallery I want to link directly.)
I learned why this is not possible due to security issues.
As such, I was thinking that perhaps I can create additional HTML pages for each gallery with just the gallery script. For example, this page.
But even though I am using the same gallery script, linking to the same CSS and same JS, the gallery has a lot of errors. Gallery seems to partially load: no photos load initially but when mouse is over the thumbs they show up, and when one clicks on a thumb the large JPG shows up. But then everything seems to stop working. I can't increment to next photo via clicking thumbs or clicking arrows.
I am missing some fundamental piece of this, but not sure what... I guess my question is that if I navigate to the gallery via main page it works but when I strip only gallery code to a seperate html page the code fails. Any ideas?

Categories