Search code examples
jqueryslidergoogle-chrome-console

jquery slider fancy box shows hover arrows. but copy on my site lacks arrows when hovering

On my website I am trying a few jquery sliders. I go and find a nice slider example on jqueryscript.net, copy it but often they do not work and I really do not understand why. If you can point me toward a solution that would be great. Also if you think there are much better ways than jquery,please let me know.

Now here is a good example: Jquery fancy box demo is here: https://www.jqueryscript.net/demo/Responsive-jQuery-Lightbox-With-Amazing-CSS3-Effects-Fancy-Box-2/demo/

When you click on an image of the " simple image gallery" the lightbox that opens has arrows when you hover over it.

I have copied this demo to my website here: https://www.hanscees.com/slider/fancy2/fancy2.html If you do the same here, there are no arrows.

My firefox/webdeveloper tools / console shows no errors.

Why are the arrows not showing up? I have made sure all css and js are in folders and subfolders like in the original html source.

Here is the firefox console enter image description here (no errors.)

But chrome console does show the culpritenter image description here

So missing images...... (how embarrasing)

Solution

  • enter image description here

    Just open chrome's console and you will see the missing files:

    https://www.hanscees.com/slider/fancy2/hccss/helpers/blank.gif
https://www.hanscees.com/slider/fancy2/hccss/helpers/fancybox_loading.gif
https://www.hanscees.com/slider/fancy2/hccss/helpers/fancybox_sprite.png
https://www.hanscees.com/slider/fancy2/hccss/helpers/fancybox_overlay.png
https://www.hanscees.com/slider/fancy2/fancybox_overlay.png

    Upload these files to right path and it will work