Integrating jQuery goodies into other sites

I have a small project with user-generated content. The task was to make a button code with a link to the user’s page, for integration into user blogs and websites. But to do the boring buttons, like most competitors did not want. I wanted, on an equal basis with simple buttons and links, to do something special, jQuery-evskoye, with Ajax and animation :).



The point is simple: the user places a script on his website that dynamically inserts a button. When you click on the button, a window pops up with a user page loaded from our resource.



The problems are obvious:

1. It is necessary to determine whether jQuery and the necessary plugin are used on the user's site. If not, then both dynamically load. Make separate codes for those who use jQuery on their website and for those who do not - not comme il faut, and even more to load in any scenario (glitches can occur, especially in plug-ins).
   
   
2. Squeezed jQuery weighs about 60 KB, and in the case of paging may not have time to fully boot and initialize before executing the code.
   
   

As a delicacy, I used the fancybox plugin. It allows you not only to display photos with a lightbox-effect, but also any other content in the iframe.

')

Below is the code.



The code for users to insert into their sites looks like this:

1. < script type = 'text/javascript' > var ExtendVar='ExtendVar'; < / script > < script type = 'text/javascript' src = 'http://MySite.ru/js/script.js' >< / script >
2. < script type = 'text/javascript' > var ExtendVar='ExtendVar'; < / script > < script type = 'text/javascript' src = 'http://MySite.ru/js/script.js' >< / script >

In script.js we write the following:

1. new MyClass ( ExtendVar ) ;
4. function MyClass ( ExtendVar ) {
5. this . ExtendVar = ExtendVar ;
7. if ( this . ExtendVar ) {
9. document. write ( "<a class = 'iframe fancy' href = 'http: //MySite.ru/" + this . ExtendVar + "' title = 'MySite.ru /" + this . ExtendVar + "' target = '_ blank' > <img src = 'http: //MySite.ru/img/dezign/MyButton.png' style = 'border: 0 none; position: relative;' alt = 'MySite.ru' /> </a> " ) ; // Insert your button
11. // Check if jQuery is used on this site
12. if ( typeof ( jQuery ) == 'undefined' ) { // If not, then connect
13. var JQ = document. createElement ( 'script' ) ;
14. Jq. src = 'http://MySite.ru/js/jquery.js' ;
15. Jq. type = 'text / javascript' ;
16. document. getElementsByTagName ( 'head' ) [ 0 ] . appendChild ( JQ ) ;
17. }
19. waitJQ ( ) ; // Waiting for jQuery initialization and initialization
20. } ;
23. function waitJQ ( ) {
24. if ( typeof ( jQuery ) == 'undefined' ) {
25. window. setTimeout ( waitJQ , 100 ) ; // Recursion every 100 milliseconds until jQuery loads
26. }
27. else {
28. // After successful determination of jQuery, we check whether the plugin we need is used on this site (in this case, fancybox)
29. if ( typeof ( jQuery. fn . fancybox ) == 'undefined' ) { // If not, then connect
30. jQuery ( "head" ) . append ( "<script type = 'text / javascript' src = 'http: //MySite.ru/js/fancybox.js'> </ script> <link rel =' stylesheet 'href =' http: // MySite. com / css / fancybox.css' type = 'text / css' media =' screen '/> " ) ;
31. }
33. waitFB ( ) ; // Waiting for the fancybox plugin to load and initialize
34. }
35. }
38. function waitFB ( ) {
39. if ( typeof ( jQuery. fn . fancybox ) == 'undefined' ) {
40. window. setTimeout ( waitFB , 100 ) ; // Recursion every 100 milliseconds until fancybox is loaded
41. }
42. else {
43. jQuery ( 'a.fancy' ) . fancybox ( { frameHeight : 190 , frameWidth : }} ) ; // Actually initialize the effect
44. }
45. }
46. }

An example can be found on the website MoiaVizitka.ru . If someone comes in handy, I will be glad.