I want to use the cytoscape-panzoom plugin distributed with Cytoscape.js. In my html page, I have included the according files from the cytoscape-web/plugins directory, as well as jquery and jquery-ui:
<link rel="stylesheet" href="javascript/jquery.cytoscapeweb-panzoom.css" />
<script type="text/javascript" src="javascript/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.cytoscapeweb-panzoom.js"></script>
In the css file jquery.cytoscapeweb-panzoom.css I have modified the locations of the png files containing the ui-icons as advised in the comment (the png files are accessible, I can see them when I paste the link in the browser):
.ui-cytoscapeweb-panzoom-zoom-button .ui-icon {
/*background-image: url("../images/ui-icons_ffffff_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_ffffff_256x240.png");
}
.ui-cytoscapeweb-panzoom-pan-button .ui-icon {
/*background-image: url("../images/ui-icons_000000_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_000000_256x240.png");
}
.ui-cytoscapeweb-panzoom-static .ui-cytoscapeweb-panzoom-zoom-button .ui-icon {
/*background-image: url("../images/ui-icons_000000_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_000000_256x240.png");
}
However, after the page loads, the panzoom controls (the circle, slider, etc.) are missing their icons, as can be seen in this screenshot (resource does not exist anymore). Does anyone have a clue what I'm doing wrong?
If you're building from the master branch, you may have to redownload the stylesheet. I think the selectors you have are out-of-date since the name change. The class names wouldn't have cytoscapeweb in the name anymore.