• View
• Edit
• History
• Attach
• Print
• Backlinks

ImgFocus-Talk

My latest version of this recipe (imgfocus_2018-01-11.zipΔ) makes the following changes:

1. There’s a new config option, $ImgFocusExceptionSelectors. This is an array containing CSS selectors specifying images to be excluded from the Img Focus effect. All the usual sorts of selectors may be used, just as in CSS. For example, to exclude images in the sidebar and in blockquotes, you would place the following in config.php (prior to including imgfocus.php):
   

   $ImgFocusExceptionSelectors = array('#sidebar img', 'blockquote img');
   

2. Performance of the mouse-wheel-based scrolling should be improved a bit more.

---

I have uploaded a new version of this recipe (imgfocus_2018-01-06.zipΔ Outdated; see newer version, above ). It makes the following changes:

1. All config options now use camelCase (e.g. $ImgFocusFadeInTime)
2. $ImgFocusExceptionList now works properly
3. A new config option, $ImgFocusBrowserShrinkRatio, determines to what percent of the window size the image will be scaled when clicked on (default is 0.8; 1.0 would mean “scale all the way to make it just fit in the window”)
4. When an image is in the exception list, it is now excluded from the hover style (drop shadow), the on-click effect, etc., as well as from the zooming (this is done by adding the noImgFocus class to the image)
5. Conversely, an image may be excluded from the ImgFocus effect by adding the noImgFocus class to it
   (To make this easier, ImgFocus now adds an img WikiStyle shortcut (a shorter way to write apply=img); thus you can do, e.g., %img noImgFocus% Attach:my_picture.png %%)
6. Minor performance enhancement to the mouse-wheel zooming (should take slightly less CPU time now)

---

Hi, I love this recipe, but have some problems/concerns:

1. Setting $ImgfocusZoomToFitTime does not seem to work (the other two variables, $ImgfocusFadeInTime and $ImgfocusFadeInTime, do work fine).
2. The exception list excludes specified images from zooming when clicked—but does not exclude them from receiving the hover style! Is this intentional?
3. Related to #2 but more fundamental: this recipe currently affects all images on a page. But I would like to include or exclude images, on a page by page basis (i.e., via wiki markup)!
4. I notice that zooming an image is very CPU-intensive (and I am on a fairly modern, high-end desktop machine). Is it possible to somehow optimize this?
5. This is more of a feature addition request than a problem, but I am wondering if it's possible to show a different image when focused, than the one clicked on? (Obviously, my goal is to have a thumbnail version of the image on the actual page, and the full-sized one not loaded until clicked to focus it—that way a visitor to the page will not have to immediately download potentially very large images on initially loading the page!)

That aside, thank you for a great recipe!

Said Achmiz December 02, 2017, at 01:13 AM

---

ccox July 25, 2016, at 01:57 PM Adding css for firefox and chrome will greatly enhance this recipe. Fortunately I do have access to Safari (webkit) so I was able to view the demo, but it's not my normal browser of choice and I imagine many people are using a different browser.

LSMeng July 26, 2016, at 10:40 AM Thanks for the feedback. The next enhancement would definitely be supporting more browsers. One question to clarify though; as written in the description page, this recipe already works for Chrome and Safari, as Chrome is my browser of choice actually. And this recipe in Chrome has been tested on both Mac and Windows. Please let me know if you have a problem getting this recipe working with Chrome. In that case I would provide a quick fix.

---

ccox July 26, 2016, at 03:40 PM Sorry, yes it does sort of work on Chrome. Could not drag things around. Scroll was broken on Safari, now seems to work ok. Not sure how useful the recipe is really, but nice eyecandy.

LSMeng July 27, 2016, at 09:41 AM. Dragging is enabled after the image is zoomed beyond the screen size. If not, could you provide your OS/browser versions so that I may have this problem fixed. As to the usefulness, again as written in the description, there is a motivation and scenario where people will find such a feature desirable. As to the eye candy, I will take that as a compliment even though it is generally a negative word. Thanks for giving it a try anyway.