Response title
This is preview!
Move this topic
Framework Icons and Thumbs of theme switcher widget doesn't work
Analyzing
- Need more info
- Not a problem
- Temporary fix
- Analyzing
- Working on it
- Solved
in Developing jQuery UI
•
8 years ago
Hi there,
the framework Icons on http://jqueryui.com/themeroller/ doesn't, teher are only squares visible, the hover images are visible.
Same problem at theme switcher widget, all images are broken... 
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<div id="switcher"></div>Regards Dirk
Attachments
4
Replies(27)
Thanks, ticket created http://bugs.jqueryui.com/ticket/6881
Leave a comment on rdworth's reply
Great framework icons works fine again... but the preview-thumbnails of the theme switcher widget still doesn't work
Attachments
I wasn't able to reproduce this (the icons are showing for me). Could you please link to a live sample page showing the problem, so we can take closer look?
Leave a comment on soliddirk's reply
ah demo is available here:
Leave a comment on soliddirk's reply
still no solution for that?
is it possible to load the preview images from a local folder?
regards Dirk
I have no idea what you're trying to show with that page since it's an empty page with a theme switcher.
Leave a comment on soliddirk's reply
yes thats right and the theme switcher thumbnails are not shown for me
can you see them?
Yes, they show up fine: http://gyazo.com/1cf3d2dcfecd2a59e65d16a64055e343.png
Leave a comment on soliddirk's reply
I wonder what went wrong? Why do I doesn't see them? See the picture attached 
Do I need local files in my themes folder? Can't be true because i simple refer to the switchertool:
-
<
script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> -
<div id="themeswitcher"></div>
The thumbs should also be loaded from that url isn't it?
Attachments
Leave a comment on soliddirk's reply
Same problem here on my page, I don't see any images. I also can't see the images on your page. I checked the links to the images via firebug and they seem to be fine (loads preview in firebug), but they don't display. The path targets to http://jqueryui.com/themeroller/images/themeGallery/theme_90_ui_light.png for first entry.
Leave a comment on host_x's reply
Sorry, I don´t know if I can help but I have the same problem.
I tried loading the scripts from local, from jquery and from google and doesn´t work neither.
I tried loading the scripts from local, from jquery and from google and doesn´t work neither.
Leave a comment on martin.varta's reply
doesn't show for me either. in the developer tools in chrome it's showing errors on those images as 403 forbidden
GET http://jqueryui.com/themeroller/images/themeGallery/theme_90_ui_light.png 403 (Forbidden)
Leave a comment on deckberg's reply
Works for me. Does it not work for you every time or only some of the time?
Leave a comment on etiger13's reply
You are not allowed to hotlink to jQuery properties other than code.jquery.com. http://blog.jquery.com/2010/12/30/hotlinking-to-be-disabled-on-jan-31-2011/
Leave a comment on snover's reply
@etiger13 doesn't work every time...
@snover what does that mean, hotlink to jquery? I insert the switcher as described on jqueryui...
Leave a comment on soliddirk's reply
GOT IT! 
I downloaded the file from http://jqueryui.com/themeroller/themeswitchertool/ and saved it as "themeswitchertool.js" to my local drive and voila everything works fine! Thanks to snover for that hotlinking tip!
Leave a comment on soliddirk's reply
yes, the hotlinking definitely seems to be the issue. the jqueryui docs for the themeswitcher tool needs to be updated to instruct users to download and host the code themselves or add the tool to code.jquery.com
Are your really sure this solves the problem? Please check my website: http://www.ecommerce-boosting.com/test/index.html
I hosted the themeswitcher.js by myself but the images still don't display. Do I have to change something on the code?
Leave a comment on deckberg's reply
yes that worked for me, also on my testpage http://h2o.somee.com/demo/test.htm and i have nothing changed in source code can you see the images directly @
http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_ui_light.png
?Please try the attached themeswitchertool.js
Seems to be a difference in your version don't know if that cares becaus the images refered in your .js are also available but the difference is listet below:
Your version:
-
<li><a href="http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px"> <img src="http://jqueryui.com/themeroller/images/themeGallery/theme_90_ui_light.png" alt="UI Lightness" title="UI Lightness" /> <span class="themeName">UI lightness</span> </a></li>
My Version:
-
<li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_ui_light.png" alt="UI Lightness" title="UI Lightness" /> <span class="themeName">UI lightness</span> </a></li>
Give a try
Attachments
I tried it now and sure your file works. But it is still not the original file so there should be an update on juery ui homepage.
Leave a comment on soliddirk's reply
I have downloaded the file directly from: http://jqueryui.com/themeroller/themeswitchertool/
Leave a comment on soliddirk's reply
It's a result of the new hotlinking policy; there's an explanation at DevCurry but it involves self-hosting the widget script, individually downloading all the required images, and patching all the image references in the script; a bit tedious. There probably wont be a better solution until the open source ThemeRoller 2.0 is released... :-(
So yes, you need to download the script; yes, you need to make modifications to it (it's not enough just to save a copy locally, the copy needs to be editted); and yes, you need the images downloaded locally too.
Leave a comment on laurie71's reply
Well downloading and using the version offered by soliddirk seems to work, images hotlinked from static.jquery.com load fine whereas images hotlinked from jquery-ui.com don't load, obviously a result of the new hotlinking policy.
The thing is it's not the "users" that are hotlinking to these images, it's the plugin itself, even if you host the script locally. If the images aren't supposed to be hotlinked either that should be explained better and there should be a zip file ready with the thumbnail images instead of having to download them one by one.
Anyways as long as you hotlink from static.jquery.com as in soliddirk's code it shouldn't break, at least for now...
John R. D'Orazio
John R. D'Orazio
Leave a comment on Lwangaman's reply
Either way this does not help users that are using the file on sites like jsfiddle.net or jsbin.com
jsfiddle.net and jsbin.com are both whitelisted as per hotlinking
Leave a comment on david.sullivan's reply
Hi guys,
I tried to make the Theme Switcher Widget work before I found this thread.
Does anybody know if the problems with hotlinks (thumbnails AND icons in the generated widget) will be fix soon ?
I'm ok with the fact that having a downloadable zip file containing all stuff to make this wonderful widget work in local could be a great idea until all problems are fixed.
Samuel
I tried to make the Theme Switcher Widget work before I found this thread.
Does anybody know if the problems with hotlinks (thumbnails AND icons in the generated widget) will be fix soon ?
I'm ok with the fact that having a downloadable zip file containing all stuff to make this wonderful widget work in local could be a great idea until all problems are fixed.
Samuel
Leave a comment on sam42fr's reply
In the meantime I've made my own git repository with a slightly modified code: https://github.com/Lwangaman/Themeswitcher
John R. D'Orazio
I couldn't find the themeswitcher widget anywhere in the jquery-ui repository, so I decided to make my own (based on soliddirk's solution).
A couple of the things I have changed:
-> instead of creating the ul list with the jquery-ui themes with a single string, I decided to construct an object that is then iterated to create the string with the ul list. This way it is much easier to add / subtract themes from the list. -> I didn't like the loadTheme option triggering a click on the ul list and subsequently calling the onselect callback. So I made a couple simple modifications to the cookie read / loadTheme option behaviour, eliminating the click trigger and the onselect callback. This way the onselect callback is only triggered when an actual user instantiated selection is made on the widget.
John R. D'Orazio
Leave a comment on Lwangaman's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to soliddirk's problem
{"z2655461":[14737000001913647,14737000001934083,14737000002058553],"z2956707":[14737000002042355,14737000002384324],"z5312656":[14737000001912653,14737000001934027,14737000001938172,14737000001991729,14737000001993987,14737000001991924,14737000002001326,14737000002000360,14737000002005194,14737000002014068],"z5266870":[14737000002037495],"z5941352":[14737000002197354],"z78551":[14737000001998192,14737000002000531],"z3322423":[14737000002001138],"z2656090":[14737000001992887,14737000001996035],"z4151704":[14737000001997051],"z1508341":[14737000001998206],"z2967459":[14737000002059477],"z5458960":[14737000001995106,14737000002005178,14737000002009993]}