Results 1 to 9 of 9

Thread: Spotlight Effect

  1. #1
    Join Date
    Jun 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Spotlight Effect

    Simple Spotlight Effect using Jquery-1.4.2
    By:Arka caraka

    Using jQuery plugin Version 1.4.2.min.js.Generated by the script as a canvas element. Accordingly, the Internet Explorer is, unfortunately, only a square "light box" to Einsatz.1 The size of the spot may be on the options or automatically determined by the size of the graphic. Another option is the layer with the darkening per click, This visible on any browser .

    Parameter setting:

    spot_auto_val
    This factor value of the radius of the spotlight, it is determined if the parameter was spot_radius set to 'auto '. The smaller the value, the greater will be the spot.
    Possible values: number

    spot_luminosity
    This value determines the brightness of the spotlights. The smaller the value, the brighter will be the spot, the clearer and sharper the edges of the circle of light.
    Possible values: number> 1004

    spot_color
    Sets the color of the spotlight and the layer is determined by the darkening. Please do not shortened color information (eg # 000), since the hex value is internally converted to an RGB value!
    Possible values​​: Hexadecimal color code to, for example '# 000000 '

    spot_alpha
    With this option, the transparency of the spotlight and the layer is determined by the darkening.
    Possible values​​: 0 - 1

    spot_switch
    If this parameter is active (1 or true), the layer with the darkening per click, one-or ausgefadet.
    Possible values​​: 1, true, 0 or false

    Firefox 3.6.x
    Chrome 5.x
    Safari 5.x
    Opera 10.x
    Flock 2.x
    Internet Explorer 6, 7, 8

    View demo at http://spotlightdemo.blogspot.com/

    View last improvement at : http://slideprofilpnpm.blogspot.com/2011/06/5if.html

    or, Download this demo
    Last edited by Arkacaraka; 06-19-2011 at 01:48 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,074
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    IE 5.5 and up have proprietary style filters that can do that with a circular spotlight. Perhaps you would consider implementing them for those browsers as a part of your script.

    For some insight on what's involved, see the Dynamic Drive Image Spotlight effect script:

    http://www.dynamicdrive.com/dynamicindex4/spotlight.htm

    It's for IE only.

    It may be of some interest as well that a similar effect can be achieved by superimposing a semi-transparent .png image over whatever you want to lend this effect to. This superimposed image can be made to follow the movement of the mouse. That will work cross browser except for IE 6 and less where .png support is more limited. I believe that can be worked out though using the alpha image loader filter for those browsers.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey,jscheuer1........
    You are very correct, and it's all a frustrating I want to display to all broswer, maybe you can help me?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,074
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Probably. Do you have a specific question?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    as we know, the spotlight-effect that my show did not work properly on IE browser and the spotlight effect that you show only works well in IE, how techniques to combine these two methods? In order for this effect could appear in all browsers.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,074
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Do we? The spotlight effect works fine in IE 9 standards mode.

    I took the liberty of unpacking the Spot script and altering it slightly:

    Attachment 3931

    I was a little disappointed to see that browser sniffing was employed. I devised a means test by declaring the canvas variable earlier and then testing for its getContext property instead of $.browser.msie. That worked to allow IE 9 to display the effect If IE 9 was in standards mode as it is given this page:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Standards Compliant Spotlight Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- JQuery Core -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <!-- JQuery Spot-PlugIn -->
    <script type="text/javascript" src="jquery.Spot.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('.spot').Spot({
    			spot_radius: 'auto',
    			spot_auto_val: 2.10,
    			spot_luminosity: 500,
    			spot_color: '#000000',
    			spot_alpha: 0.9,
    			spot_switch: 1
    		});
    	});
    </script>
    </head>
    <body>
    <img class="spot" src="Tri%20bhuana%20tungga%20dewi.jpg" style="width: 420px; height: 599px;" alt="" />
    </body>
    </html>
    Armed with this knowledge I would be inclined to either just wait out the death of IE 8 and less or use IE conditional comments to conditionally use one script or the other.

    Edit: Added Later:

    While testing this it appears that the packed version of the script doesn't work at all in IE 8 and less. Not even the square spotlight appears. It works OK in IE 9 in IE 9 mode, IE 8 mode and IE 7 mode, but not in the actual IE 8, 7 and 6 browsers.

    For what I was saying before about using a .png image, see:

    http://home.comcast.net/~jscheuer1/side/flashlight/

    Oh, and here's a way to combine the filter approach with the modified jquery.Spot.js script:

    http://home.comcast.net/~jscheuer1/side/spotlight/
    Last edited by jscheuer1; 06-13-2011 at 12:15 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Very good ..!
    You really surprised me.
    It even works very well in IE 8, I have seen it.
    Now is the perfect spotligt
    I should like to thank you,... this is really great.

  8. #8
    Join Date
    Jun 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    In the example that you show as "flashlight DEMO"

    http://home.comcast.net/~jscheuer1/side/flashlight/

    Interestingly, you use the opposite attributes
    of view!
    like the white background in view, but black in attribute!
    and black text in the display, but white on the attribute.
    I think this will be problematic when we use another color!
    Does this make the "flashlight DEMO" you, able to perform well in IE and other browsers?

    While in the second example, "Standards Compliant Demo Spotlight",

    http://home.comcast.net/~jscheuer1/side/spotlight/
    It's really as expected.Changes that you do on the script spot.js, have made it perfect.
    IE no longer displays a rectangle as a reaction rom mask PNG image.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,074
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Arkacaraka View Post
    In the example that you show as "flashlight DEMO"

    http://home.comcast.net/~jscheuer1/side/flashlight/

    Interestingly, you use the opposite attributes
    of view!
    like the white background in view, but black in attribute!
    and black text in the display, but white on the attribute.
    I think this will be problematic when we use another color!
    I think you would have to make up a new .png image to accommodate another color, yes. With server side code like PHP and a GD library or similar + client side AJAX, this might be able to be done on the fly. But you could always just make different colored .png images and have them available for certain basic colors.

    Quote Originally Posted by Arkacaraka View Post
    Does this make the "flashlight DEMO" you, able to perform well in IE and other browsers?
    Does what? The alpha channel .png image has been fully supported in virtually all browsers except IE since like forever. In IE full support started with version 7. We don't really need to worry about any IE prior to 6, but this code works with IE 5.5 through IE 6 due to its use of the alpha image loader filter for those browsers. Unfortunately in those browsers you cannot click on or select objects illuminated with the flashlight. In all others you can.

    Quote Originally Posted by Arkacaraka View Post
    While in the second example, "Standards Compliant Demo Spotlight",

    http://home.comcast.net/~jscheuer1/side/spotlight/
    It's really as expected.Changes that you do on the script spot.js, have made it perfect.
    IE no longer displays a rectangle as a reaction rom mask PNG image.
    The only changes I made to jquery.Spot.js were to unpack it and to declare the canvas variable earlier so that it's getContext property could be the test of whether or not a browser is capable of the effect or not, rather than browser sniffing.

    Just unpacking it made it work - sort of (showed the rectangle) in IE 6, 7, and 8. For some reason the packed version was throwing a fatal error in those browsers. The packed version works OK in IE 9 - again sort of, regardless of the mode (IE 9, 7, or 8). But once you put the spotlight2.html page in one of those lesser version IE browsers - say in an actual IE 8 browser, it threw a fatal error and just showed the image with no effect at all.

    Changing to a means test from a browser sniffing test allowed it to work in IE 9 standards mode which fully supports canvas and RGBA.

    To get it to show the spotlight in IE 8 and less I simply took the Dynamic Drive script and made it a part of a front end that detects IE less than 9 or IE 9 in nonstandard mode and uses the DD script instead.

    The two scripts are still separate to a great extent. To truly integrate them, one would need to determine what needs to be set to what in each to achieve a similar effect and set some variables at the beginning of the document ready function that could be used by either script.

    I'm also concerned about how the jquery.Spot.js uses class as the selector. Does this mean that multiple images of the same class and/or images with id's or different classes could also be initialized? Probably. If so something more needs to be done with the DD script to give it that capability. Integrating some jQuery methods to it should fit the bill. But it also could have it's methods grafted into the jquery.Spot.js file for those cases when the browser fails the canvas.getContext test. When a browser fails that test, it could be tested for having the image element's filter property. If so the DD scripts methods could then be employed.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •