imgSizer with Image Slideshow
Permalink
Hello All,
I am trying to incorporate the scaling abilities of ingSizer.js with c5's Image Slideshow block.
About imgSizer:http://www.alistapart.com/articles/responsive-web-design/...
Example:http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexib...
I am a photographer building a professional portfolio. One of the most important things to me is keeping my layout fluid (images included) to ensure the best experience for each user. I'd like each person to see my work as large as their screen will let them.
The idea of having my images sized by the percentage dimensions of a container was extremely exciting, and I had no problem implementing it on a static site.
When I converted my framework into a theme, however, the functionality stopped.
I assume this is due to the settings the block itself abides by, but after trying many things, I am still unable to apply the principle of the .js to the images appearing in the slideshow.
Can anyone shed some light on this?
Thanks so much,
Levi
I am trying to incorporate the scaling abilities of ingSizer.js with c5's Image Slideshow block.
About imgSizer:http://www.alistapart.com/articles/responsive-web-design/...
Example:http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexib...
I am a photographer building a professional portfolio. One of the most important things to me is keeping my layout fluid (images included) to ensure the best experience for each user. I'd like each person to see my work as large as their screen will let them.
The idea of having my images sized by the percentage dimensions of a container was extremely exciting, and I had no problem implementing it on a static site.
When I converted my framework into a theme, however, the functionality stopped.
I assume this is due to the settings the block itself abides by, but after trying many things, I am still unable to apply the principle of the .js to the images appearing in the slideshow.
Can anyone shed some light on this?
Thanks so much,
Levi
Hi Jordan,
Thank you for your thoughtful reply.
I was aware of the Galleria Block but did not think to try working with it. Great suggestion.
It displays images in <ul>'s, which was my main problem with the default slideshow (displays images as bg), so Galleria will probably work.
Do you have a particular 'diff / file merge' utility to suggest? I will google, but if you recommend one over another that'd be great.
Thanks again!
Levi
Thank you for your thoughtful reply.
I was aware of the Galleria Block but did not think to try working with it. Great suggestion.
It displays images in <ul>'s, which was my main problem with the default slideshow (displays images as bg), so Galleria will probably work.
Do you have a particular 'diff / file merge' utility to suggest? I will google, but if you recommend one over another that'd be great.
Thanks again!
Levi
If you're on a mac, see this for recommendations:
http://stackoverflow.com/questions/187064/graphical-diff-for-mac-os...
(basically there's a free one that's included when you install XCode -- it's on a separate "Developer Tools" disc that comes with all macs -- but you probably don't have that installed so it might be easier to download a different one than to dig up that installation disc).
If you're on windows, use WinMerge:
http://winmerge.org/
http://stackoverflow.com/questions/187064/graphical-diff-for-mac-os...
(basically there's a free one that's included when you install XCode -- it's on a separate "Developer Tools" disc that comes with all macs -- but you probably don't have that installed so it might be easier to download a different one than to dig up that installation disc).
If you're on windows, use WinMerge:
http://winmerge.org/
I am working with the same problem right now. The problem I keep having is the image height loading off of the page. I can get it to scale appropriately to the width (100%), but to keep it proportional, the height loads off of the browser window. Have you gotten past this problem yet?
If I were having this problem I would set up a page in my concrete5 site that had the normal unmodified slideshow on it, go to that page (as a normal user -- not logged in), do a "View Page Source" in my browser, and save that to a new file. Then gather the related js and css and image files that that page was relying on (firefox is really helpful with this because you can click links from the "View Page Source" window and it opens them) and copy them to the same folder you put the page html into. Re-jigger the page html's css and javascript include lines in the <head> so they're pointing to the copies you just made inside its own folder, and rejigger the img tags to point to the new images.
Now you have this as a starting point, I would try to make the imgSizer work with this static html file. Once you have this working, then you can go back and know what changes are necessary to the concrete5 file (well, theoretically anyway -- you'll either want to take good notes as you go along, or learn how to use a "diff" or "file merge" program that shows you the difference between two files -- compare the original to your new working copy and it will highlight what's changed).
Another option would be to download the free "Galleria" addon from the marketplace and see if that one is easier to modify -- I know it uses jQuery so perhaps its javascript is cleaner / less obtrusive.
Best of luck!
-Jordan