Highslide conflicting with slimScroll.js - javascript

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.

Related

Slide menu doesn't work

I'm working on a new header for a website, and my header works perfectly on codepen. You can check it out at:
http://codepen.io/germangallo/pen/eNeKWG
As you may see, if you click on the menu button (categories) it slides a menu that I've done following the steps by callmenick here:
http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
However, when I've tried to make it work at my site, everything is great, but the slider menu doesn't work. I'm new at JavaScript, so I really don't know if the problem is there, and I can't figure out any way to fix the problem.
My site is: http://www.pensarpoker.com/nuevo
It looks like you script is executing before the dom element is accessible on the page, try adding your slider script to the bottom of the page or wrapping it in a $( document ).ready() if your using jQuery.

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

Fancybox v2: Loading animation is not being shown

In my scenario, I'm linking to fairly large images (both in dimensions and filesize). It's understandable that fancybox will have to load for a few seconds before displaying them. The problem is that the loading animation is not showing up, so when the user clicks the thumbnail, it gives the impression that nothing is happening. Fancybox eventually comes up a few seconds later.
There is a secondary issue, also. The images are set to display as a gallery, via the "rel" attribute. Even when the user is viewing one image, browsing to the next takes a while (again, due to filesize), but because the throbber is not showing up, it seems like the prev/next buttons are not working. Any ideas?
I should add that I'm using fancybox v2.
My code (after including the necessary css and scripts for fancybox and the buttons helper, of course): http://pastebin.com/u3g8U8FS
Updating to the latest version (2.0.6) did the trick.
Make sure that the fancybox_loading.gif as well as the fancybox_sprite.png files are in the same folder as the jquery.fancybox.css file

conflicting scripts: image-slider malfunctions when i added fancyBox scripts to html document

I am redesigning a webpage that has an image slider on the top to show some of my featured work. The image-slider works fine and works by clicking the right or left arrow for the next or previous image.
All was well until I added the links to the fancyBox files so that other images (not in the slider) in that page could be viewed in the pop-up fancyBox.
fancyBox works fine, but because of it my slider now disappears once one clicks the left or right arrow.
Can someone please help me fix the slider, or fancyBox, so that both the slider scripts and FancyBox work on this page?
Here is a link to the webpage
In the source I have also noted which files in the are part of the slider and which are for FancyBox
I would really appreciate any and all help!
Thanks in Advance,
theirf
See an error when stepping through in Firebug:
When I called show(slide,[object Object]) with your args, an error was thrown!
TypeError: f.easing[i.animatedProperties[this.prop]] is not a function
[Break On This Error]
...e)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f....
Caused by $("#pic-" + next).show('slide',{direction: dir});
where 'dir' is an empty string. Believe this is causing your error.
You also have a few other issues...such as hiding before showing. Check out more jQuery anim stuff or..simpler use a pre-built slider :)
It looks like you are loading two different versions of jQuery. One in the header(1.7), the other is in the top of m.js(1.4.2). Try taking that copy of 1.4.2 out of m.js to start. Make sure to check your console for errors, then go from there.
Also, I'm not all that sure about the slider script you are using. I have used BxSlider with fancyBox on the same page before, and they play great together... Just an idea.

jQuery lightbox plug-in bug

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.

Categories