|
|
(55 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| |
| <html xmlns="http://www.w3.org/1999/xhtml"> | | <html xmlns="http://www.w3.org/1999/xhtml"> |
- |
| |
| <head> | | <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> | | <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
| <title>main</title> | | <title>main</title> |
| + | <script src="http://igem.3vfree.us/js/FancyZoom_zzjs_net.js" language="JavaScript" type="text/javascript"></script> |
| + | <script src="http://igem.3vfree.us/js/FancyZoomHTML.js" language="JavaScript" type="text/javascript"></script> |
| <style type="text/css"> | | <style type="text/css"> |
| #top-section{ | | #top-section{ |
Line 47: |
Line 47: |
| } | | } |
| /* global setting*/ | | /* global setting*/ |
- | #globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%; z-index:0;} | + | #globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%; z-index=0;} |
| #content{ | | #content{ |
| | | |
Line 62: |
Line 62: |
| background-color:transparent; | | background-color:transparent; |
| border:none; | | border:none; |
| + | |
| } | | } |
| siteSub{ | | siteSub{ |
Line 72: |
Line 73: |
| /* end of global setting*/ | | /* end of global setting*/ |
| #cover{ | | #cover{ |
| + | position:relative; |
| width:100%; | | width:100%; |
- | height:auto;
| + | height:100%; |
- | position:absolute;
| + | top:-18px; |
- | top:0px;
| + | |
- | left:0px;
| + | |
| z-index:0; | | z-index:0; |
| } | | } |
Line 89: |
Line 90: |
| height:16%; | | height:16%; |
| left:60%; | | left:60%; |
- | top:4.5%; | + | top:1%; |
- | z-index:20; | + | z-index:10; |
| } | | } |
| #guide1 | | #guide1 |
Line 97: |
Line 98: |
| width:11%; | | width:11%; |
| height:16%; | | height:16%; |
- | left:70%; | + | left:71%; |
- | top:4.5%; | + | top:0.5%; |
- | z-index:20; | + | z-index:10; |
| } | | } |
| #guide2 | | #guide2 |
Line 107: |
Line 108: |
| height:16%; | | height:16%; |
| left:81%; | | left:81%; |
- | top:4%; | + | top:0.5%; |
- | z-index:20; | + | z-index:10; |
| } | | } |
| #guide3 | | #guide3 |
Line 114: |
Line 115: |
| position:absolute; | | position:absolute; |
| width:14%; | | width:14%; |
- | height:16%; | + | height:15%; |
| left:80%; | | left:80%; |
- | top:19%; | + | top:17%; |
- | z-index:20; | + | z-index:10; |
| } | | } |
| #guide4 | | #guide4 |
Line 125: |
Line 126: |
| height:16%; | | height:16%; |
| left:80%; | | left:80%; |
- | top:34%; | + | top:32%; |
- | z-index:20; | + | z-index:10; |
| } | | } |
| #guide5 | | #guide5 |
Line 134: |
Line 135: |
| height:16%; | | height:16%; |
| left:80%; | | left:80%; |
- | top:49%; | + | top:47%; |
- | z-index:20; | + | z-index:10; |
| } | | } |
| #guide6 | | #guide6 |
Line 143: |
Line 144: |
| height:16%; | | height:16%; |
| left:80%; | | left:80%; |
- | top:63.5%; | + | top:61%; |
- | z-index:20; | + | z-index:10; |
| } | | } |
| #mycontent{ | | #mycontent{ |
Line 150: |
Line 151: |
| height:60.6%; | | height:60.6%; |
| position:absolute; | | position:absolute; |
- | top:24.8%; | + | top:22.8%; |
| left:13.1%; | | left:13.1%; |
| z-index:15; | | z-index:15; |
- | overflow:scroll; | + | overflow-y:scroll; |
- | overflow-x:hidden;
| + | font-family: 'MS Sans Serif', Geneva, sans-serif; |
| + | font-size: 15px; |
| } | | } |
- | </style>
| |
| <style type="text/css"> | | <style type="text/css"> |
| #content2 | | #content2 |
Line 211: |
Line 212: |
| <a href="https://2013.igem.org/Team:NJU_NJUT_China/project" target="team"><img src="https://static.igem.org/mediawiki/igem.org/3/32/NJU_NJUT_CHINA_Project.jpg" border="0" > </a></div> | | <a href="https://2013.igem.org/Team:NJU_NJUT_China/project" target="team"><img src="https://static.igem.org/mediawiki/igem.org/3/32/NJU_NJUT_CHINA_Project.jpg" border="0" > </a></div> |
| <div id="guide3"> | | <div id="guide3"> |
- | <a href="../project/project.html" target="team" ><img src="https://static.igem.org/mediawiki/igem.org/5/59/NJU_NJUT_CHINA_Model.jpg"/> </a> | + | <a href="https://2013.igem.org/Team:NJU_NJUT_China/modeling" ><img src="https://static.igem.org/mediawiki/igem.org/5/59/NJU_NJUT_CHINA_Model.jpg"/> </a> |
| </div> | | </div> |
| <div id="guide4"> | | <div id="guide4"> |
- | <a href=""><img src="https://static.igem.org/mediawiki/igem.org/8/80/NJU_NJUT_CHINA_Data.jpg"/></a> | + | <a href="https://2013.igem.org/Team:NJU_NJUT_China/data"><img src="https://static.igem.org/mediawiki/igem.org/8/80/NJU_NJUT_CHINA_Data.jpg"/></a> |
| </div> | | </div> |
| <div id="guide5"> | | <div id="guide5"> |
- | <a href=""><img src="https://static.igem.org/mediawiki/igem.org/1/16/NJU_NJUT_CHINA_Safety.jpg"/></a> | + | <a href="https://2013.igem.org/Team:NJU_NJUT_China/safety"><img src="https://static.igem.org/mediawiki/igem.org/1/16/NJU_NJUT_CHINA_Safety.jpg"/></a> |
| </div> | | </div> |
| <div id="guide6"> | | <div id="guide6"> |
- | <a href=""><img src="https://static.igem.org/mediawiki/igem.org/4/44/NJU_NJUT_CHINA_Hump.jpg"/></a> | + | <a href="https://2013.igem.org/Team:NJU_NJUT_China/humanpractice"><img src="https://static.igem.org/mediawiki/igem.org/4/44/NJU_NJUT_CHINA_Hump.jpg"/></a> |
| </div> | | </div> |
| <div id="mycontent"> | | <div id="mycontent"> |
Line 229: |
Line 230: |
| <div class="entry"> | | <div class="entry"> |
| <p> All cellular systems evolve ways to combat predators and genomic parasites. In bacteria and archaea, numerous resistance mechanisms have been developed against phage. Clustered regularly interspaced short palindromic repeats (CRISPR)/CRISPR-associated (Cas) adaptive immune systems are found in bacteria and archaea to protect the hosts against the invasion of viruses and plasmids. Most of the bacteria and archaea acquire virus resistance by integrating short viral nucleotide acid fragments into the CRISPR sequences. It is believed that the integrated CRISPR sequences have the ability to form a genetic memory which prevents the host from being infected. The CRISPRs and Cas (CRISPR-associated) interact and form this prokaryotic adaptive immune system. A CRISPR array consists of the palindromic repeating sequences of typically 30bp that are interspaced by similar-sized acquired spacer sequences. The CRISPR loci are generally flanked by an AT-rich leader sequence which contains promoter and the binding sites for regulatory proteins. Highly-variable CRISPR loci provide insights into the phage and host population dynamics, and new avenues for enhanced phage resistance and genetic typing and tagging of industrial strains.</p> | | <p> All cellular systems evolve ways to combat predators and genomic parasites. In bacteria and archaea, numerous resistance mechanisms have been developed against phage. Clustered regularly interspaced short palindromic repeats (CRISPR)/CRISPR-associated (Cas) adaptive immune systems are found in bacteria and archaea to protect the hosts against the invasion of viruses and plasmids. Most of the bacteria and archaea acquire virus resistance by integrating short viral nucleotide acid fragments into the CRISPR sequences. It is believed that the integrated CRISPR sequences have the ability to form a genetic memory which prevents the host from being infected. The CRISPRs and Cas (CRISPR-associated) interact and form this prokaryotic adaptive immune system. A CRISPR array consists of the palindromic repeating sequences of typically 30bp that are interspaced by similar-sized acquired spacer sequences. The CRISPR loci are generally flanked by an AT-rich leader sequence which contains promoter and the binding sites for regulatory proteins. Highly-variable CRISPR loci provide insights into the phage and host population dynamics, and new avenues for enhanced phage resistance and genetic typing and tagging of industrial strains.</p> |
- | <center><a href="https://static.igem.org/mediawiki/igem.org/e/e9/NJU_NJUT_CHINA_Pro1.jpg" title=""><img src="https://static.igem.org/mediawiki/igem.org/8/84/NJU_NJUT_CHINA_Pro1min.jpg" width="200" height="85" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center> | + | <center><a href="http://igem.3vfree.us/images/pro1.jpg" title="img1"><img src="http://igem.3vfree.us/images/pro1min.jpg" style="width:200px" ;height:125px" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center> |
| <p> The CRISPR/Cas immune system encompasses a multistep process by which DNA-encoded spacers lead to sequence-specific interference of invasive nucleic acids, mediated by a ribonucleoproteic complex. There are two main processes characteristic of CRISPR-based immunity, namely spacer acquisition (immunization) and crRNA-mediated interference (immunity). Thus far, most of the molecular basis for the CRISPR/Cas mechanism of action has focused on the interference step, with notable focus on the biochemical details of crRNA biogenesis and target nucleic acid interaction.</p> | | <p> The CRISPR/Cas immune system encompasses a multistep process by which DNA-encoded spacers lead to sequence-specific interference of invasive nucleic acids, mediated by a ribonucleoproteic complex. There are two main processes characteristic of CRISPR-based immunity, namely spacer acquisition (immunization) and crRNA-mediated interference (immunity). Thus far, most of the molecular basis for the CRISPR/Cas mechanism of action has focused on the interference step, with notable focus on the biochemical details of crRNA biogenesis and target nucleic acid interaction.</p> |
| <p> There are three highly diverse CRISPR/Cas types exist, and major structural and functional differences are displayed in their mode of generating resistance against the invading DNA and/or RNA elements. The CRISPR-associated protein Cas9 that belongs to the type II CRISPR/Cas system has attracted much attention due to its potential use in genomic engineering. The cas9 signature gene encodes a large multifunctional protein with the ability to generate crRNA and targets phage and plasmid DNA for degradation. Cas9 contains a RuvC-like nuclease domain and a McrA-like HNH nuclease domain. The functional S. thermophilus CRISPR model is a Type II system that has been shown to provide defense against bacteriophage and plasmid DNA. </p> | | <p> There are three highly diverse CRISPR/Cas types exist, and major structural and functional differences are displayed in their mode of generating resistance against the invading DNA and/or RNA elements. The CRISPR-associated protein Cas9 that belongs to the type II CRISPR/Cas system has attracted much attention due to its potential use in genomic engineering. The cas9 signature gene encodes a large multifunctional protein with the ability to generate crRNA and targets phage and plasmid DNA for degradation. Cas9 contains a RuvC-like nuclease domain and a McrA-like HNH nuclease domain. The functional S. thermophilus CRISPR model is a Type II system that has been shown to provide defense against bacteriophage and plasmid DNA. </p> |
- | <center><a href="https://static.igem.org/mediawiki/igem.org/3/32/NJU_NJUT_CHINA_Pro4.jpg" title=""><img src="https://static.igem.org/mediawiki/igem.org/3/33/NJU_NJUT_CHINA_Pro4min.jpg" width="200" height="125" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center> | + | <center><a href="http://igem.3vfree.us/images/pro4.jpg" title="img1"><img src="http://igem.3vfree.us/images/pro4min.jpg" style="width:200px" ;height:125px" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center> |
| <p> In the spacer acquisition process, small fragments of invasive nucleic acid are incorporated into the host genome between CRISPR repeats at the leader end of the locus. The polarized integration of novel repeat-spacer units at the leader end provides a chronological time line of spacer acquisition events. The sequence on the viral genome that corresponds to a spacer is termed proto-spacer. In most cases, a very short stretch of nucleotides is conserved in the immediate vicinity of the proto-spacer, the CRISPR motif, or the proto-spacer-associated motif (PAM). The ability to acquire novel spacers in vivo has been experimentally documented in S. thermophilus and Streptococcus mutans, in which trans-encoded small CRISPR RNA (tracrRNA) is involved in the processing of pre-CRISPR RNA (pre-crRNA) into crRNA. Subsequent recruitment of a housekeeping RNase III catalyzes, together with Cas9, cleavage of the pre-crRNA in the repeat; this yields 66-nt crRNA molecules that are further trimmed at the 5’end to produce 39–42-nt mature crRNA containing a 20-nt spacer sequence. During Type II CRISPR interference, target DNA is cleaved in the proto-spacer sequence by the CRISPR/Cas complex. </p> | | <p> In the spacer acquisition process, small fragments of invasive nucleic acid are incorporated into the host genome between CRISPR repeats at the leader end of the locus. The polarized integration of novel repeat-spacer units at the leader end provides a chronological time line of spacer acquisition events. The sequence on the viral genome that corresponds to a spacer is termed proto-spacer. In most cases, a very short stretch of nucleotides is conserved in the immediate vicinity of the proto-spacer, the CRISPR motif, or the proto-spacer-associated motif (PAM). The ability to acquire novel spacers in vivo has been experimentally documented in S. thermophilus and Streptococcus mutans, in which trans-encoded small CRISPR RNA (tracrRNA) is involved in the processing of pre-CRISPR RNA (pre-crRNA) into crRNA. Subsequent recruitment of a housekeeping RNase III catalyzes, together with Cas9, cleavage of the pre-crRNA in the repeat; this yields 66-nt crRNA molecules that are further trimmed at the 5’end to produce 39–42-nt mature crRNA containing a 20-nt spacer sequence. During Type II CRISPR interference, target DNA is cleaved in the proto-spacer sequence by the CRISPR/Cas complex. </p> |
- | <center><a href="https://static.igem.org/mediawiki/igem.org/9/9b/NJU_NJUT_CHINA_Pro2.jpg" title=""><img src="https://static.igem.org/mediawiki/igem.org/8/89/NJU_NJUT_CHINA_Pro2min.jpg" width="200" height="220" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center> | + | <center><a href="http://igem.3vfree.us/images/pro2.jpg" title="img2"><img src="http://igem.3vfree.us/images/pro2min.jpg"style="width:200px" ;height:225px" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center> |
| <p> All organisms need to continuously adapt to changes in their environment. Horizontal gene transfer (HGT), a dominant evolutionary process, at least, in prokaryotes, appears to be a form of Lamarckian inheritance. Obviously, the CRISPR system is a much more impressive example. Now, genome-editing by Cas9 is so efficient that it creates a popular method to knock out one gene from the host genome. However, people met lots of problems during attempts to specifically-targeting and cleavage-facilitating. As the best result of natural selection, we are sure that the CRISPR/Cas systems have their specification and high-efficiency when choosing the spacer. Based on the CRISPR library of S. thermophiles, E. Coli, Lactobacillus and Salmonella, we design one model to simulate the selection of spacer with the help of PAM (proto-spacer associated motifs), and then develop a theory to guide the choosing target-sites. </p> | | <p> All organisms need to continuously adapt to changes in their environment. Horizontal gene transfer (HGT), a dominant evolutionary process, at least, in prokaryotes, appears to be a form of Lamarckian inheritance. Obviously, the CRISPR system is a much more impressive example. Now, genome-editing by Cas9 is so efficient that it creates a popular method to knock out one gene from the host genome. However, people met lots of problems during attempts to specifically-targeting and cleavage-facilitating. As the best result of natural selection, we are sure that the CRISPR/Cas systems have their specification and high-efficiency when choosing the spacer. Based on the CRISPR library of S. thermophiles, E. Coli, Lactobacillus and Salmonella, we design one model to simulate the selection of spacer with the help of PAM (proto-spacer associated motifs), and then develop a theory to guide the choosing target-sites. </p> |
- | <center><a href="https://static.igem.org/mediawiki/igem.org/1/1f/NJU_NJUT_CHINA_Pro3.jpg" title=" "><img src="https://static.igem.org/mediawiki/igem.org/0/04/NJU_NJUT_CHINAPro3min.jpg" width="200" height="147" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center> | + | <center><a href="http://igem.3vfree.us/images/pro3.jpg" title=" img3"><img src="http://igem.3vfree.us/images/pro3min.jpg" style="width:200px" ;height:125px" border="0" alt="" id="img-mwsf-2" class="photo" /></a></center> |
| <p> As the imaginary result of our model, we choose the CRISPR sequence from E.coli K12, which is the most usual bacteria with the CRISPR/Cas system, to be our genetic memory loaded into the vector plasmid1 has been well designed. This plasmid is taken to generate the guiding-RNA (crRNA & tracrRNA) and interact with the Cas9 protein produced by the Cas9 plasmid2. We also design a set of target plasmids3 which have the linear structure of eGFP-target sequence. The target sequence is one existing spacer in the CRISPR of E.coli K12, which can pair with crRNA produced by the plasmid1. This linear structure will be destroyed, theoretically, when the Cas9/gRNA complex recognize the target-site, which is a 30nt sequence, and then cleavage the GFP gene, which is adjacent to the 30-nt target site. </p> | | <p> As the imaginary result of our model, we choose the CRISPR sequence from E.coli K12, which is the most usual bacteria with the CRISPR/Cas system, to be our genetic memory loaded into the vector plasmid1 has been well designed. This plasmid is taken to generate the guiding-RNA (crRNA & tracrRNA) and interact with the Cas9 protein produced by the Cas9 plasmid2. We also design a set of target plasmids3 which have the linear structure of eGFP-target sequence. The target sequence is one existing spacer in the CRISPR of E.coli K12, which can pair with crRNA produced by the plasmid1. This linear structure will be destroyed, theoretically, when the Cas9/gRNA complex recognize the target-site, which is a 30nt sequence, and then cleavage the GFP gene, which is adjacent to the 30-nt target site. </p> |
| <p> In some sense, our experiments is significant. Firstly, our model give us an efficient and novel method to design the DNA sequence which can be transcribed into the crRNA, which works with the core protein Cas9 to recognize the target site. With the help of our model, we can import this system into the superbugs, which can produce the well-selected guiding-RNA specifically paired with the resistance genes. Meanwhile, it is believed that the chance that this kind of crRNAs pair with other sites is very low. Subsequently, Cas9 interacts with gRNA and then forms the protein-nucleic acid complex. This complex can theoretically destroy any chosen resistance genes, and its carrier, or rather the common plasmids, can exist in the bacteria steady and continuously. Secondly, we can use this system into several fields, such as fermentation, antiviral field, improving the plants and any other bioindustrial works. At the same time, the mechanism of heredity and genome evolution embodied in the CRISPR-Cas system seems to be bona fide Lamarckian we can also learn the co-evolution of bacteria and virus from these systems.</p> | | <p> In some sense, our experiments is significant. Firstly, our model give us an efficient and novel method to design the DNA sequence which can be transcribed into the crRNA, which works with the core protein Cas9 to recognize the target site. With the help of our model, we can import this system into the superbugs, which can produce the well-selected guiding-RNA specifically paired with the resistance genes. Meanwhile, it is believed that the chance that this kind of crRNAs pair with other sites is very low. Subsequently, Cas9 interacts with gRNA and then forms the protein-nucleic acid complex. This complex can theoretically destroy any chosen resistance genes, and its carrier, or rather the common plasmids, can exist in the bacteria steady and continuously. Secondly, we can use this system into several fields, such as fermentation, antiviral field, improving the plants and any other bioindustrial works. At the same time, the mechanism of heredity and genome evolution embodied in the CRISPR-Cas system seems to be bona fide Lamarckian we can also learn the co-evolution of bacteria and virus from these systems.</p> |
Line 242: |
Line 243: |
| </div> | | </div> |
| </div> | | </div> |
- | <div class="post">
| + | </div> |
- | <h2 class="title">Project ...</h2> | + | <div class="post"> |
- | <p>This is <strong>IGEM_TEST </strong>参考文献</p> | + | <h2 class="title">Reference.</h2> |
| + | <p>1. Zhang J, Rouillon C, Kerou M, et al. Structure and mechanism of the CMR complex for CRISPR-mediated antiviral immunity[J]. Molecular cell, 2012, 45(3): 303-313.</p> |
| + | <p>2. Brouns S J J, Jore M M, Lundgren M, et al. Small CRISPR RNAs guide antiviral defense in prokaryotes[J]. Science, 2008, 321(5891): 960-964. |
| + | <p>3. Díez-Villaseñor C, Almendros C, García-Martínez J, et al. Diversity of CRISPR loci in Escherichia coli[J]. Microbiology, 2010, 156(5): 1351-1361. |
| + | <p>4. Marraffini L A, Sontheimer E J. CRISPR interference limits horizontal gene transfer in staphylococci by targeting DNA[J]. science, 2008, 322(5909): 1843-1845. |
| + | <p>5. Shen B, Zhang J, Wu H, et al. Generation of gene-modified mice via Cas9/RNA-mediated gene targeting[J]. Cell research, 2013. |
| + | <p>6. Westra E R, Swarts D C, Staals R H J, et al. The CRISPRs, they are a-Changin': how prokaryotes generate adaptive immunity[J]. Annual review of genetics, 2012, 46: 311-339. |
| + | <p>7. Cong L, Ran F A, Cox D, et al. Multiplex genome engineering using CRISPR/Cas systems[J]. Science, 2013, 339(6121): 819-823. |
| + | <p>8. Karginov F V, Hannon G J. The CRISPR system: small RNA-guided defense in bacteria and archaea[J]. Molecular cell, 2010, 37(1): 7-19. |
| + | <p>9. Mali P, Yang L, Esvelt K M, et al. RNA-guided human genome engineering via Cas9[J]. Science, 2013, 339(6121): 823-826. |
| + | <p>10. Barrangou R, Horvath P. CRISPR: new horizons in phage resistance and strain identification[J]. Annual review of food science and technology, 2012, 3: 143-162. |
| + | <p>11. Hale C R, Majumdar S, Elmore J, et al. Essential features and rational design of CRISPR RNAs that function with the Cas RAMP module complex to cleave RNAs[J]. Molecular cell, 2012, 45(3): 292-302. |
| + | <p>12. Semenova E, Jore M M, Datsenko K A, et al. Interference by clustered regularly interspaced short palindromic repeat (CRISPR) RNA is governed by a seed sequence[J]. Proceedings of the National Academy of Sciences, 2011, 108(25): 10098-10103. |
| <div style="clear: both;"></div> | | <div style="clear: both;"></div> |
| <br /> | | <br /> |
| </div> | | </div> |
- | </div>
| |
- | </div>
| |
- | </div>
| |
| </div> | | </div> |
| </div> | | </div> |
- | <script type="text/javascript">
| |
- | var includeCaption = true; // Turn on the "caption" feature, and write out the caption HTML
| |
- | var zoomTime = 5; // Milliseconds between frames of zoom animation
| |
- | var zoomSteps = 15; // Number of zoom animation frames
| |
- | var includeFade = 1; // Set to 1 to fade the image in / out as it zooms
| |
- | var minBorder = 90; // Amount of padding between large, scaled down images, and the window edges
| |
- | var shadowSettings = '0px 5px 25px rgba(0, 0, 0, '; // Blur, radius, color of shadow for compatible browsers
| |
- |
| |
- | var zoomImagesURI = 'images-global/zoom/'; // Location of the zoom and shadow images
| |
- |
| |
- | // Init. Do not add anything below this line, unless it's something awesome.
| |
- |
| |
- | var myWidth = 0, myHeight = 0, myScroll = 0; myScrollWidth = 0; myScrollHeight = 0;
| |
- | var zoomOpen = false, preloadFrame = 1, preloadActive = false, preloadTime = 0, imgPreload = new Image();
| |
- | var preloadAnimTimer = 0;
| |
- |
| |
- | var zoomActive = new Array(); var zoomTimer = new Array();
| |
- | var zoomOrigW = new Array(); var zoomOrigH = new Array();
| |
- | var zoomOrigX = new Array(); var zoomOrigY = new Array();
| |
- |
| |
- | var zoomID = "ZoomBox";
| |
- | var theID = "ZoomImage";
| |
- | var zoomCaption = "ZoomCaption";
| |
- | var zoomCaptionDiv = "ZoomCapDiv";
| |
- |
| |
- | if (navigator.userAgent.indexOf("MSIE") != -1) {
| |
- | var browserIsIE = true;
| |
- | }
| |
- |
| |
- | // Zoom: Setup The Page! Called in your <body>'s onLoad handler.
| |
- |
| |
- | function setupZoom() {
| |
- | prepZooms();
| |
- | insertZoomHTML();
| |
- | zoomdiv = document.getElementById(zoomID);
| |
- | zoomimg = document.getElementById(theID);
| |
- | }
| |
- |
| |
- | // Zoom: Inject Javascript functions into hrefs pointing to images, one by one!
| |
- | // Skip any href that contains a rel="nozoom" tag.
| |
- | // This is done at page load time via an onLoad() handler.
| |
- |
| |
- | function prepZooms() {
| |
- | if (! document.getElementsByTagName) {
| |
- | return;
| |
- | }
| |
- | var links = document.getElementsByTagName("a");
| |
- | for (i = 0; i < links.length; i++) {
| |
- | if (links[i].getAttribute("href")) {
| |
- | if (links[i].getAttribute("href").search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) {
| |
- | if (links[i].getAttribute("rel") != "nozoom") {
| |
- | links[i].onclick = function (event) { return zoomClick(this, event); };
| |
- | links[i].onmouseover = function () { zoomPreload(this); };
| |
- | }
| |
- | }
| |
- | }
| |
- | }
| |
- | }
| |
- |
| |
- | // Zoom: Load an image into an image object. When done loading, function sets preloadActive to false,
| |
- | // so other bits know that they can proceed with the zoom.
| |
- | // Preloaded image is stored in imgPreload and swapped out in the zoom function.
| |
- |
| |
- | function zoomPreload(from) {
| |
- |
| |
- | var theimage = from.getAttribute("href");
| |
- |
| |
- | // Only preload if we have to, i.e. the image isn't this image already
| |
- |
| |
- | if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) {
| |
- | preloadActive = true;
| |
- | imgPreload = new Image();
| |
- |
| |
- | // Set a function to fire when the preload is complete, setting flags along the way.
| |
- |
| |
- | imgPreload.onload = function() {
| |
- | preloadActive = false;
| |
- | }
| |
- |
| |
- | // Load it!
| |
- | imgPreload.src = theimage;
| |
- | }
| |
- | }
| |
- |
| |
- | // Zoom: Start the preloading animation cycle.
| |
- |
| |
- | function preloadAnimStart() {
| |
- | preloadTime = new Date();
| |
- | document.getElementById("ZoomSpin").style.left = (myWidth / 2) + 'px';
| |
- | document.getElementById("ZoomSpin").style.top = ((myHeight / 2) + myScroll) + 'px';
| |
- | document.getElementById("ZoomSpin").style.visibility = "visible";
| |
- | preloadFrame = 1;
| |
- | document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png';
| |
- | preloadAnimTimer = setInterval("preloadAnim()", 100);
| |
- | }
| |
- |
| |
- | // Zoom: Display and ANIMATE the jibber-jabber widget. Once preloadActive is false, bail and zoom it up!
| |
- |
| |
- | function preloadAnim(from) {
| |
- | if (preloadActive != false) {
| |
- | document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png';
| |
- | preloadFrame++;
| |
- | if (preloadFrame > 12) preloadFrame = 1;
| |
- | } else {
| |
- | document.getElementById("ZoomSpin").style.visibility = "hidden";
| |
- | clearInterval(preloadAnimTimer);
| |
- | preloadAnimTimer = 0;
| |
- | zoomIn(preloadFrom);
| |
- | }
| |
- | }
| |
- |
| |
- | // ZOOM CLICK: We got a click! Should we do the zoom? Or wait for the preload to complete?
| |
- | // todo?: Double check that imgPreload src = clicked src
| |
- |
| |
- | function zoomClick(from, evt) {
| |
- |
| |
- | var shift = getShift(evt);
| |
- |
| |
- | // Check for Command / Alt key. If pressed, pass them through -- don't zoom!
| |
- | if (! evt && window.event && (window.event.metaKey || window.event.altKey)) {
| |
- | return true;
| |
- | } else if (evt && (evt.metaKey|| evt.altKey)) {
| |
- | return true;
| |
- | }
| |
- |
| |
- | // Get browser dimensions
| |
- | getSize();
| |
- |
| |
- | // If preloading still, wait, and display the spinner.
| |
- | if (preloadActive == true) {
| |
- | // But only display the spinner if it's not already being displayed!
| |
- | if (preloadAnimTimer == 0) {
| |
- | preloadFrom = from;
| |
- | preloadAnimStart();
| |
- | }
| |
- | } else {
| |
- | // Otherwise, we're loaded: do the zoom!
| |
- | zoomIn(from, shift);
| |
- | }
| |
- |
| |
- | return false;
| |
- |
| |
- | }
| |
- |
| |
- | // Zoom: Move an element in to endH endW, using zoomHost as a starting point.
| |
- | // "from" is an object reference to the href that spawned the zoom.
| |
- |
| |
- | function zoomIn(from, shift) {
| |
- |
| |
- | zoomimg.src = from.getAttribute("href");
| |
- |
| |
- | // Determine the zoom settings from where we came from, the element in the <a>.
| |
- | // If there's no element in the <a>, or we can't get the width, make stuff up
| |
- |
| |
- | if (from.childNodes[0].width) {
| |
- | startW = from.childNodes[0].width;
| |
- | startH = from.childNodes[0].height;
| |
- | startPos = findElementPos(from.childNodes[0]);
| |
- | } else {
| |
- | startW = 50;
| |
- | startH = 12;
| |
- | startPos = findElementPos(from);
| |
- | }
| |
- |
| |
- | hostX = startPos[0];
| |
- | hostY = startPos[1];
| |
- |
| |
- | // Make up for a scrolled containing div.
| |
- | // TODO: This HAS to move into findElementPos.
| |
- |
| |
- | if (document.getElementById('scroller')) {
| |
- | hostX = hostX - document.getElementById('scroller').scrollLeft;
| |
- | }
| |
- |
| |
- | // Determine the target zoom settings from the preloaded image object
| |
- |
| |
- | endW = imgPreload.width;
| |
- | endH = imgPreload.height;
| |
- |
| |
- | // Start! But only if we're not zooming already!
| |
- |
| |
- | if (zoomActive[theID] != true) {
| |
- |
| |
- | // Clear everything out just in case something is already open
| |
- |
| |
- | if (document.getElementById("ShadowBox")) {
| |
- | document.getElementById("ShadowBox").style.visibility = "hidden";
| |
- | } else if (! browserIsIE) {
| |
- |
| |
- | // Wipe timer if shadow is fading in still
| |
- | if (fadeActive["ZoomImage"]) {
| |
- | clearInterval(fadeTimer["ZoomImage"]);
| |
- | fadeActive["ZoomImage"] = false;
| |
- | fadeTimer["ZoomImage"] = false;
| |
- | }
| |
- |
| |
- | document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)';
| |
- | }
| |
- |
| |
- | document.getElementById("ZoomClose").style.visibility = "hidden";
| |
- |
| |
- | // Setup the CAPTION, if existing. Hide it first, set the text.
| |
- |
| |
- | if (includeCaption) {
| |
- | document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
| |
- | if (from.getAttribute('title') && includeCaption) {
| |
- | // Yes, there's a caption, set it up
| |
- | document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');
| |
- | } else {
| |
- | document.getElementById(zoomCaption).innerHTML = "";
| |
- | }
| |
- | }
| |
- |
| |
- | // Store original position in an array for future zoomOut.
| |
- |
| |
- | zoomOrigW[theID] = startW;
| |
- | zoomOrigH[theID] = startH;
| |
- | zoomOrigX[theID] = hostX;
| |
- | zoomOrigY[theID] = hostY;
| |
- |
| |
- | // Now set the starting dimensions
| |
- |
| |
- | zoomimg.style.width = startW + 'px';
| |
- | zoomimg.style.height = startH + 'px';
| |
- | zoomdiv.style.left = hostX + 'px';
| |
- | zoomdiv.style.top = hostY + 'px';
| |
- |
| |
- | // Show the zooming image container, make it invisible
| |
- |
| |
- | if (includeFade == 1) {
| |
- | setOpacity(0, zoomID);
| |
- | }
| |
- | zoomdiv.style.visibility = "visible";
| |
- |
| |
- | // If it's too big to fit in the window, shrink the width and height to fit (with ratio).
| |
- |
| |
- | sizeRatio = endW / endH;
| |
- | if (endW > myWidth - minBorder) {
| |
- | endW = myWidth - minBorder;
| |
- | endH = endW / sizeRatio;
| |
- | }
| |
- | if (endH > myHeight - minBorder) {
| |
- | endH = myHeight - minBorder;
| |
- | endW = endH * sizeRatio;
| |
- | }
| |
- |
| |
- | zoomChangeX = ((myWidth / 2) - (endW / 2) - hostX);
| |
- | zoomChangeY = (((myHeight / 2) - (endH / 2) - hostY) + myScroll);
| |
- | zoomChangeW = (endW - startW);
| |
- | zoomChangeH = (endH - startH);
| |
- |
| |
- | // Shift key?
| |
- |
| |
- | if (shift) {
| |
- | tempSteps = zoomSteps * 7;
| |
- | } else {
| |
- | tempSteps = zoomSteps;
| |
- | }
| |
- |
| |
- | // Setup Zoom
| |
- |
| |
- | zoomCurrent = 0;
| |
- |
| |
- | // Setup Fade with Zoom, If Requested
| |
- |
| |
- | if (includeFade == 1) {
| |
- | fadeCurrent = 0;
| |
- | fadeAmount = (0 - 100) / tempSteps;
| |
- | } else {
| |
- | fadeAmount = 0;
| |
- | }
| |
- |
| |
- | // Do It!
| |
- |
| |
- | zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+hostX+", "+zoomChangeX+", "+hostY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDoneIn(zoomID)')", zoomTime);
| |
- | zoomActive[theID] = true;
| |
- | }
| |
- | }
| |
- |
| |
- | // Zoom it back out.
| |
- |
| |
- | function zoomOut(from, evt) {
| |
- |
| |
- | // Get shift key status.
| |
- | // IE events don't seem to get passed through the function, so grab it from the window.
| |
- |
| |
- | if (getShift(evt)) {
| |
- | tempSteps = zoomSteps * 7;
| |
- | } else {
| |
- | tempSteps = zoomSteps;
| |
- | }
| |
- |
| |
- | // Check to see if something is happening/open
| |
- |
| |
- | if (zoomActive[theID] != true) {
| |
- |
| |
- | // First, get rid of the shadow if necessary.
| |
- |
| |
- | if (document.getElementById("ShadowBox")) {
| |
- | document.getElementById("ShadowBox").style.visibility = "hidden";
| |
- | } else if (! browserIsIE) {
| |
- |
| |
- | // Wipe timer if shadow is fading in still
| |
- | if (fadeActive["ZoomImage"]) {
| |
- | clearInterval(fadeTimer["ZoomImage"]);
| |
- | fadeActive["ZoomImage"] = false;
| |
- | fadeTimer["ZoomImage"] = false;
| |
- | }
| |
- |
| |
- | document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)';
| |
- | }
| |
- |
| |
- | // ..and the close box...
| |
- |
| |
- | document.getElementById("ZoomClose").style.visibility = "hidden";
| |
- |
| |
- | // ...and the caption if necessary!
| |
- |
| |
- | if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") {
| |
- | // fadeElementSetup(zoomCaptionDiv, 100, 0, 5, 1);
| |
- | document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
| |
- | }
| |
- |
| |
- | // Now, figure out where we came from, to get back there
| |
- |
| |
- | startX = parseInt(zoomdiv.style.left);
| |
- | startY = parseInt(zoomdiv.style.top);
| |
- | startW = zoomimg.width;
| |
- | startH = zoomimg.height;
| |
- | zoomChangeX = zoomOrigX[theID] - startX;
| |
- | zoomChangeY = zoomOrigY[theID] - startY;
| |
- | zoomChangeW = zoomOrigW[theID] - startW;
| |
- | zoomChangeH = zoomOrigH[theID] - startH;
| |
- |
| |
- | // Setup Zoom
| |
- |
| |
- | zoomCurrent = 0;
| |
- |
| |
- | // Setup Fade with Zoom, If Requested
| |
- |
| |
- | if (includeFade == 1) {
| |
- | fadeCurrent = 0;
| |
- | fadeAmount = (100 - 0) / tempSteps;
| |
- | } else {
| |
- | fadeAmount = 0;
| |
- | }
| |
- |
| |
- | // Do It!
| |
- |
| |
- | zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+startX+", "+zoomChangeX+", "+startY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDone(zoomID, theID)')", zoomTime);
| |
- | zoomActive[theID] = true;
| |
- | }
| |
- | }
| |
- |
| |
- | // Finished Zooming In
| |
- |
| |
- | function zoomDoneIn(zoomdiv, theID) {
| |
- |
| |
- | // Note that it's open
| |
- |
| |
- | zoomOpen = true;
| |
- | zoomdiv = document.getElementById(zoomdiv);
| |
- |
| |
- | // Position the table shadow behind the zoomed in image, and display it
| |
- |
| |
- | if (document.getElementById("ShadowBox")) {
| |
- |
| |
- | setOpacity(0, "ShadowBox");
| |
- | shadowdiv = document.getElementById("ShadowBox");
| |
- |
| |
- | shadowLeft = parseInt(zoomdiv.style.left) - 13;
| |
- | shadowTop = parseInt(zoomdiv.style.top) - 8;
| |
- | shadowWidth = zoomdiv.offsetWidth + 26;
| |
- | shadowHeight = zoomdiv.offsetHeight + 26;
| |
- |
| |
- | shadowdiv.style.width = shadowWidth + 'px';
| |
- | shadowdiv.style.height = shadowHeight + 'px';
| |
- | shadowdiv.style.left = shadowLeft + 'px';
| |
- | shadowdiv.style.top = shadowTop + 'px';
| |
- |
| |
- | document.getElementById("ShadowBox").style.visibility = "visible";
| |
- | fadeElementSetup("ShadowBox", 0, 100, 5);
| |
- |
| |
- | } else if (! browserIsIE) {
| |
- | // Or, do a fade of the modern shadow
| |
- | fadeElementSetup("ZoomImage", 0, .8, 5, 0, "shadow");
| |
- | }
| |
- |
| |
- | // Position and display the CAPTION, if existing
| |
- |
| |
- | if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") {
| |
- | // setOpacity(0, zoomCaptionDiv);
| |
- | zoomcapd = document.getElementById(zoomCaptionDiv);
| |
- | zoomcapd.style.top = parseInt(zoomdiv.style.top) + (zoomdiv.offsetHeight + 15) + 'px';
| |
- | zoomcapd.style.left = (myWidth / 2) - (zoomcapd.offsetWidth / 2) + 'px';
| |
- | zoomcapd.style.visibility = "visible";
| |
- | // fadeElementSetup(zoomCaptionDiv, 0, 100, 5);
| |
- | }
| |
- |
| |
- | // Display Close Box (fade it if it's not IE)
| |
- |
| |
- | if (!browserIsIE) setOpacity(0, "ZoomClose");
| |
- | document.getElementById("ZoomClose").style.visibility = "visible";
| |
- | if (!browserIsIE) fadeElementSetup("ZoomClose", 0, 100, 5);
| |
- |
| |
- | // Get keypresses
| |
- | document.onkeypress = getKey;
| |
- |
| |
- | }
| |
- |
| |
- | // Finished Zooming Out
| |
- |
| |
- | function zoomDone(zoomdiv, theID) {
| |
- |
| |
- | // No longer open
| |
- |
| |
- | zoomOpen = false;
| |
- |
| |
- | // Clear stuff out, clean up
| |
- |
| |
- | zoomOrigH[theID] = "";
| |
- | zoomOrigW[theID] = "";
| |
- | document.getElementById(zoomdiv).style.visibility = "hidden";
| |
- | zoomActive[theID] == false;
| |
- |
| |
- | // Stop getting keypresses
| |
- |
| |
- | document.onkeypress = null;
| |
- |
| |
- | }
| |
- |
| |
- | // Actually zoom the element
| |
- |
| |
- | function zoomElement(zoomdiv, theID, zoomCurrent, zoomStartW, zoomChangeW, zoomStartH, zoomChangeH, zoomStartX, zoomChangeX, zoomStartY, zoomChangeY, zoomSteps, includeFade, fadeAmount, execWhenDone) {
| |
- |
| |
- | // console.log("Zooming Step #"+zoomCurrent+ " of "+zoomSteps+" (zoom " + zoomStartW + "/" + zoomChangeW + ") (zoom " + zoomStartH + "/" + zoomChangeH + ") (zoom " + zoomStartX + "/" + zoomChangeX + ") (zoom " + zoomStartY + "/" + zoomChangeY + ") Fade: "+fadeAmount);
| |
- |
| |
- | // Test if we're done, or if we continue
| |
- |
| |
- | if (zoomCurrent == (zoomSteps + 1)) {
| |
- | zoomActive[theID] = false;
| |
- | clearInterval(zoomTimer[theID]);
| |
- |
| |
- | if (execWhenDone != "") {
| |
- | eval(execWhenDone);
| |
- | }
| |
- | } else {
| |
- |
| |
- | // Do the Fade!
| |
- |
| |
- | if (includeFade == 1) {
| |
- | if (fadeAmount < 0) {
| |
- | setOpacity(Math.abs(zoomCurrent * fadeAmount), zoomdiv);
| |
- | } else {
| |
- | setOpacity(100 - (zoomCurrent * fadeAmount), zoomdiv);
| |
- | }
| |
- | }
| |
- |
| |
- | // Calculate this step's difference, and move it!
| |
- |
| |
- | moveW = cubicInOut(zoomCurrent, zoomStartW, zoomChangeW, zoomSteps);
| |
- | moveH = cubicInOut(zoomCurrent, zoomStartH, zoomChangeH, zoomSteps);
| |
- | moveX = cubicInOut(zoomCurrent, zoomStartX, zoomChangeX, zoomSteps);
| |
- | moveY = cubicInOut(zoomCurrent, zoomStartY, zoomChangeY, zoomSteps);
| |
- |
| |
- | document.getElementById(zoomdiv).style.left = moveX + 'px';
| |
- | document.getElementById(zoomdiv).style.top = moveY + 'px';
| |
- | zoomimg.style.width = moveW + 'px';
| |
- | zoomimg.style.height = moveH + 'px';
| |
- |
| |
- | zoomCurrent++;
| |
- |
| |
- | clearInterval(zoomTimer[theID]);
| |
- | zoomTimer[theID] = setInterval("zoomElement('"+zoomdiv+"', '"+theID+"', "+zoomCurrent+", "+zoomStartW+", "+zoomChangeW+", "+zoomStartH+", "+zoomChangeH+", "+zoomStartX+", "+zoomChangeX+", "+zoomStartY+", "+zoomChangeY+", "+zoomSteps+", "+includeFade+", "+fadeAmount+", '"+execWhenDone+"')", zoomTime);
| |
- | }
| |
- | }
| |
- |
| |
- | // Zoom Utility: Get Key Press when image is open, and act accordingly
| |
- |
| |
- | function getKey(evt) {
| |
- | if (! evt) {
| |
- | theKey = event.keyCode;
| |
- | } else {
| |
- | theKey = evt.keyCode;
| |
- | }
| |
- |
| |
- | if (theKey == 27) { // ESC
| |
- | zoomOut(this, evt);
| |
- | }
| |
- | }
| |
- |
| |
- | ////////////////////////////
| |
- | //
| |
- | // FADE Functions
| |
- | //
| |
- |
| |
- | function fadeOut(elem) {
| |
- | if (elem.id) {
| |
- | fadeElementSetup(elem.id, 100, 0, 10);
| |
- | }
| |
- | }
| |
- |
| |
- | function fadeIn(elem) {
| |
- | if (elem.id) {
| |
- | fadeElementSetup(elem.id, 0, 100, 10);
| |
- | }
| |
- | }
| |
- |
| |
- | // Fade: Initialize the fade function
| |
- |
| |
- | var fadeActive = new Array();
| |
- | var fadeQueue = new Array();
| |
- | var fadeTimer = new Array();
| |
- | var fadeClose = new Array();
| |
- | var fadeMode = new Array();
| |
- |
| |
- | function fadeElementSetup(theID, fdStart, fdEnd, fdSteps, fdClose, fdMode) {
| |
- |
| |
- | // alert("Fading: "+theID+" Steps: "+fdSteps+" Mode: "+fdMode);
| |
- |
| |
- | if (fadeActive[theID] == true) {
| |
- | // Already animating, queue up this command
| |
- | fadeQueue[theID] = new Array(theID, fdStart, fdEnd, fdSteps);
| |
- | } else {
| |
- | fadeSteps = fdSteps;
| |
- | fadeCurrent = 0;
| |
- | fadeAmount = (fdStart - fdEnd) / fadeSteps;
| |
- | fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15);
| |
- | fadeActive[theID] = true;
| |
- | fadeMode[theID] = fdMode;
| |
- |
| |
- | if (fdClose == 1) {
| |
- | fadeClose[theID] = true;
| |
- | } else {
| |
- | fadeClose[theID] = false;
| |
- | }
| |
- | }
| |
- | }
| |
- |
| |
- | // Fade: Do the fade. This function will call itself, modifying the parameters, so
| |
- | // many instances can run concurrently. Can fade using opacity, or fade using a box-shadow.
| |
- |
| |
- | function fadeElement(theID, fadeCurrent, fadeAmount, fadeSteps) {
| |
- |
| |
- | if (fadeCurrent == fadeSteps) {
| |
- |
| |
- | // We're done, so clear.
| |
- |
| |
- | clearInterval(fadeTimer[theID]);
| |
- | fadeActive[theID] = false;
| |
- | fadeTimer[theID] = false;
| |
- |
| |
- | // Should we close it once the fade is complete?
| |
- |
| |
- | if (fadeClose[theID] == true) {
| |
- | document.getElementById(theID).style.visibility = "hidden";
| |
- | }
| |
- |
| |
- | // Hang on.. did a command queue while we were working? If so, make it happen now
| |
- |
| |
- | if (fadeQueue[theID] && fadeQueue[theID] != false) {
| |
- | fadeElementSetup(fadeQueue[theID][0], fadeQueue[theID][1], fadeQueue[theID][2], fadeQueue[theID][3]);
| |
- | fadeQueue[theID] = false;
| |
- | }
| |
- | } else {
| |
- |
| |
- | fadeCurrent++;
| |
- |
| |
- | // Now actually do the fade adjustment.
| |
- |
| |
- | if (fadeMode[theID] == "shadow") {
| |
- |
| |
- | // Do a special fade on the webkit-box-shadow of the object
| |
- |
| |
- | if (fadeAmount < 0) {
| |
- | document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (Math.abs(fadeCurrent * fadeAmount)) + ')';
| |
- | } else {
| |
- | document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (100 - (fadeCurrent * fadeAmount)) + ')';
| |
- | }
| |
- |
| |
- | } else {
| |
- |
| |
- | // Set the opacity depending on if we're adding or subtracting (pos or neg)
| |
- |
| |
- | if (fadeAmount < 0) {
| |
- | setOpacity(Math.abs(fadeCurrent * fadeAmount), theID);
| |
- | } else {
| |
- | setOpacity(100 - (fadeCurrent * fadeAmount), theID);
| |
- | }
| |
- | }
| |
- |
| |
- | // Keep going, and send myself the updated variables
| |
- | clearInterval(fadeTimer[theID]);
| |
- | fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15);
| |
- | }
| |
- | }
| |
- |
| |
- | ////////////////////////////
| |
- | //
| |
- | // UTILITY functions
| |
- | //
| |
- |
| |
- | // Utility: Set the opacity, compatible with a number of browsers. Value from 0 to 100.
| |
- |
| |
- | function setOpacity(opacity, theID) {
| |
- |
| |
- | var object = document.getElementById(theID).style;
| |
- |
| |
- | // If it's 100, set it to 99 for Firefox.
| |
- |
| |
- | if (navigator.userAgent.indexOf("Firefox") != -1) {
| |
- | if (opacity == 100) { opacity = 99.9999; } // This is majorly awkward
| |
- | }
| |
- |
| |
- | // Multi-browser opacity setting
| |
- |
| |
- | object.filter = "alpha(opacity=" + opacity + ")"; // IE/Win
| |
- | object.opacity = (opacity / 100); // Safari 1.2, Firefox+Mozilla
| |
- |
| |
- | }
| |
- |
| |
- | // Utility: Math functions for animation calucations - From http://www.robertpenner.com/easing/
| |
- | //
| |
- | // t = time, b = begin, c = change, d = duration
| |
- | // time = current frame, begin is fixed, change is basically finish - begin, duration is fixed (frames),
| |
- |
| |
- | function linear(t, b, c, d)
| |
- | {
| |
- | return c*t/d + b;
| |
- | }
| |
- |
| |
- | function sineInOut(t, b, c, d)
| |
- | {
| |
- | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
| |
- | }
| |
- |
| |
- | function cubicIn(t, b, c, d) {
| |
- | return c*(t/=d)*t*t + b;
| |
- | }
| |
- |
| |
- | function cubicOut(t, b, c, d) {
| |
- | return c*((t=t/d-1)*t*t + 1) + b;
| |
- | }
| |
- |
| |
- | function cubicInOut(t, b, c, d)
| |
- | {
| |
- | if ((t/=d/2) < 1) return c/2*t*t*t + b;
| |
- | return c/2*((t-=2)*t*t + 2) + b;
| |
- | }
| |
- |
| |
- | function bounceOut(t, b, c, d)
| |
- | {
| |
- | if ((t/=d) < (1/2.75)){
| |
- | return c*(7.5625*t*t) + b;
| |
- | } else if (t < (2/2.75)){
| |
- | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
| |
- | } else if (t < (2.5/2.75)){
| |
- | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
| |
- | } else {
| |
- | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
| |
- | }
| |
- | }
| |
- |
| |
- |
| |
- | // Utility: Get the size of the window, and set myWidth and myHeight
| |
- | // Credit to quirksmode.org
| |
- |
| |
- | function getSize() {
| |
- |
| |
- | // Window Size
| |
- |
| |
- | if (self.innerHeight) { // Everyone but IE
| |
- | myWidth = window.innerWidth;
| |
- | myHeight = window.innerHeight;
| |
- | myScroll = window.pageYOffset;
| |
- | } else if (document.documentElement && document.documentElement.clientHeight) { // IE6 Strict
| |
- | myWidth = document.documentElement.clientWidth;
| |
- | myHeight = document.documentElement.clientHeight;
| |
- | myScroll = document.documentElement.scrollTop;
| |
- | } else if (document.body) { // Other IE, such as IE7
| |
- | myWidth = document.body.clientWidth;
| |
- | myHeight = document.body.clientHeight;
| |
- | myScroll = document.body.scrollTop;
| |
- | }
| |
- |
| |
- | // Page size w/offscreen areas
| |
- |
| |
- | if (window.innerHeight && window.scrollMaxY) {
| |
- | myScrollWidth = document.body.scrollWidth;
| |
- | myScrollHeight = window.innerHeight + window.scrollMaxY;
| |
- | } else if (document.body.scrollHeight > document.body.offsetHeight) { // All but Explorer Mac
| |
- | myScrollWidth = document.body.scrollWidth;
| |
- | myScrollHeight = document.body.scrollHeight;
| |
- | } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
| |
- | myScrollWidth = document.body.offsetWidth;
| |
- | myScrollHeight = document.body.offsetHeight;
| |
- | }
| |
- | }
| |
- | function getShift(evt) {
| |
- | var shift = false;
| |
- | if (! evt && window.event) {
| |
- | shift = window.event.shiftKey;
| |
- | } else if (evt) {
| |
- | shift = evt.shiftKey;
| |
- | if (shift) evt.stopPropagation(); // Prevents Firefox from doing shifty things
| |
- | }
| |
- | return shift;
| |
- | }
| |
- | function findElementPos(elemFind)
| |
- | {
| |
- | var elemX = 0;
| |
- | var elemY = 0;
| |
- | do {
| |
- | elemX += elemFind.offsetLeft;
| |
- | elemY += elemFind.offsetTop;
| |
- | } while ( elemFind = elemFind.offsetParent )
| |
- |
| |
- | return Array(elemX, elemY);
| |
- | }
| |
- | function insertZoomHTML() {
| |
- |
| |
- | // All of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow.
| |
- |
| |
- | var inBody = document.getElementsByTagName("body").item(0);
| |
- |
| |
- | // WAIT SPINNER
| |
- |
| |
- | var inSpinbox = document.createElement("div");
| |
- | inSpinbox.setAttribute('id', 'ZoomSpin');
| |
- | inSpinbox.style.position = 'absolute';
| |
- | inSpinbox.style.left = '10px';
| |
- | inSpinbox.style.top = '10px';
| |
- | inSpinbox.style.visibility = 'hidden';
| |
- | inSpinbox.style.zIndex = '525';
| |
- | inBody.insertBefore(inSpinbox, inBody.firstChild);
| |
- |
| |
- | var inSpinImage = document.createElement("img");
| |
- | inSpinImage.setAttribute('id', 'SpinImage');
| |
- | inSpinImage.setAttribute('src', zoomImagesURI+'zoom-spin-1.png');
| |
- | inSpinbox.appendChild(inSpinImage);
| |
- |
| |
- | var inZoombox = document.createElement("div");
| |
- | inZoombox.setAttribute('id', 'ZoomBox');
| |
- |
| |
- | inZoombox.style.position = 'absolute';
| |
- | inZoombox.style.left = '10px';
| |
- | inZoombox.style.top = '10px';
| |
- | inZoombox.style.visibility = 'hidden';
| |
- | inZoombox.style.zIndex = '499';
| |
- |
| |
- | inBody.insertBefore(inZoombox, inSpinbox.nextSibling);
| |
- |
| |
- | var inImage1 = document.createElement("img");
| |
- | inImage1.onclick = function (event) { zoomOut(this, event); return false; };
| |
- | inImage1.setAttribute('src',zoomImagesURI+'spacer.gif');
| |
- | inImage1.setAttribute('id','ZoomImage');
| |
- | inImage1.setAttribute('border', '0');
| |
- | inImage1.setAttribute('style', '-webkit-box-shadow: '+shadowSettings+'0.0)');
| |
- | inImage1.style.display = 'block';
| |
- | inImage1.style.width = '10px';
| |
- | inImage1.style.height = '10px';
| |
- | inImage1.style.cursor = 'pointer'; // -webkit-zoom-out?
| |
- | inZoombox.appendChild(inImage1);
| |
- |
| |
- | var inClosebox = document.createElement("div");
| |
- | inClosebox.setAttribute('id', 'ZoomClose');
| |
- | inClosebox.style.position = 'absolute';
| |
- |
| |
- | // In MSIE, we need to put the close box inside the image.
| |
- | // It's 2008 and I'm having to do a browser detect? Sigh.
| |
- | if (browserIsIE) {
| |
- | inClosebox.style.left = '-1px';
| |
- | inClosebox.style.top = '0px';
| |
- | } else {
| |
- | inClosebox.style.left = '-15px';
| |
- | inClosebox.style.top = '-15px';
| |
- | }
| |
- |
| |
- | inClosebox.style.visibility = 'hidden';
| |
- | inZoombox.appendChild(inClosebox);
| |
- |
| |
- | var inImage2 = document.createElement("img");
| |
- | inImage2.onclick = function (event) { zoomOut(this, event); return false; };
| |
- | inImage2.setAttribute('src',zoomImagesURI+'closebox.png');
| |
- | inImage2.setAttribute('width','30');
| |
- | inImage2.setAttribute('height','30');
| |
- | inImage2.setAttribute('border','0');
| |
- | inImage2.style.cursor = 'pointer';
| |
- | inClosebox.appendChild(inImage2);
| |
- |
| |
- | // SHADOW
| |
- | // Only draw the table-based shadow if the programatic webkitBoxShadow fails!
| |
- | // Also, don't draw it if we're IE -- it wouldn't look quite right anyway.
| |
- |
| |
- | if (! document.getElementById('ZoomImage').style.webkitBoxShadow && ! browserIsIE) {
| |
- |
| |
- | // SHADOW BASE
| |
- |
| |
- | var inFixedBox = document.createElement("div");
| |
- | inFixedBox.setAttribute('id', 'ShadowBox');
| |
- | inFixedBox.style.position = 'absolute';
| |
- | inFixedBox.style.left = '50px';
| |
- | inFixedBox.style.top = '50px';
| |
- | inFixedBox.style.width = '100px';
| |
- | inFixedBox.style.height = '100px';
| |
- | inFixedBox.style.visibility = 'hidden';
| |
- | inFixedBox.style.zIndex = '498';
| |
- | inBody.insertBefore(inFixedBox, inZoombox.nextSibling);
| |
- |
| |
- | // SHADOW
| |
- | // Now, the shadow table. Skip if not compatible, or irrevelant with -box-shadow.
| |
- |
| |
- | // <div id="ShadowBox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X
| |
- | // <tr height="25">
| |
- | // <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td>
| |
- | // <td background="/images/zoom-shadow2.png"> </td>
| |
- | // <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td>
| |
- | // </tr>
| |
- |
| |
- | var inShadowTable = document.createElement("table");
| |
- | inShadowTable.setAttribute('border', '0');
| |
- | inShadowTable.setAttribute('width', '100%');
| |
- | inShadowTable.setAttribute('height', '100%');
| |
- | inShadowTable.setAttribute('cellpadding', '0');
| |
- | inShadowTable.setAttribute('cellspacing', '0');
| |
- | inFixedBox.appendChild(inShadowTable);
| |
- |
| |
- |
| |
- | var inShadowTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
| |
- | inShadowTable.appendChild(inShadowTbody);
| |
- |
| |
- | var inRow1 = document.createElement("tr");
| |
- | inRow1.style.height = '25px';
| |
- | inShadowTbody.appendChild(inRow1);
| |
- |
| |
- | var inCol1 = document.createElement("td");
| |
- | inCol1.style.width = '27px';
| |
- | inRow1.appendChild(inCol1);
| |
- | var inShadowImg1 = document.createElement("img");
| |
- | inShadowImg1.setAttribute('src', zoomImagesURI+'zoom-shadow1.png');
| |
- | inShadowImg1.setAttribute('width', '27');
| |
- | inShadowImg1.setAttribute('height', '25');
| |
- | inShadowImg1.style.display = 'block';
| |
- | inCol1.appendChild(inShadowImg1);
| |
- |
| |
- | var inCol2 = document.createElement("td");
| |
- | inCol2.setAttribute('background', zoomImagesURI+'zoom-shadow2.png');
| |
- | inRow1.appendChild(inCol2);
| |
- | // inCol2.innerHTML = '<img src=';
| |
- | var inSpacer1 = document.createElement("img");
| |
- | inSpacer1.setAttribute('src',zoomImagesURI+'spacer.gif');
| |
- | inSpacer1.setAttribute('height', '1');
| |
- | inSpacer1.setAttribute('width', '1');
| |
- | inSpacer1.style.display = 'block';
| |
- | inCol2.appendChild(inSpacer1);
| |
- |
| |
- | var inCol3 = document.createElement("td");
| |
- | inCol3.style.width = '27px';
| |
- | inRow1.appendChild(inCol3);
| |
- | var inShadowImg3 = document.createElement("img");
| |
- | inShadowImg3.setAttribute('src', zoomImagesURI+'zoom-shadow3.png');
| |
- | inShadowImg3.setAttribute('width', '27');
| |
- | inShadowImg3.setAttribute('height', '25');
| |
- | inShadowImg3.style.display = 'block';
| |
- | inCol3.appendChild(inShadowImg3);
| |
- |
| |
- | // <tr>
| |
- | // <td background="/images/zoom-shadow4.png"> </td>
| |
- | // <td bgcolor="#ffffff"> </td>
| |
- | // <td background="/images/zoom-shadow5.png"> </td>
| |
- | // </tr>
| |
- |
| |
- | inRow2 = document.createElement("tr");
| |
- | inShadowTbody.appendChild(inRow2);
| |
- |
| |
- | var inCol4 = document.createElement("td");
| |
- | inCol4.setAttribute('background', zoomImagesURI+'zoom-shadow4.png');
| |
- | inRow2.appendChild(inCol4);
| |
- | // inCol4.innerHTML = ' ';
| |
- | var inSpacer2 = document.createElement("img");
| |
- | inSpacer2.setAttribute('src',zoomImagesURI+'spacer.gif');
| |
- | inSpacer2.setAttribute('height', '1');
| |
- | inSpacer2.setAttribute('width', '1');
| |
- | inSpacer2.style.display = 'block';
| |
- | inCol4.appendChild(inSpacer2);
| |
- |
| |
- | var inCol5 = document.createElement("td");
| |
- | inCol5.setAttribute('bgcolor', '#ffffff');
| |
- | inRow2.appendChild(inCol5);
| |
- | // inCol5.innerHTML = ' ';
| |
- | var inSpacer3 = document.createElement("img");
| |
- | inSpacer3.setAttribute('src',zoomImagesURI+'spacer.gif');
| |
- | inSpacer3.setAttribute('height', '1');
| |
- | inSpacer3.setAttribute('width', '1');
| |
- | inSpacer3.style.display = 'block';
| |
- | inCol5.appendChild(inSpacer3);
| |
- |
| |
- | var inCol6 = document.createElement("td");
| |
- | inCol6.setAttribute('background', zoomImagesURI+'zoom-shadow5.png');
| |
- | inRow2.appendChild(inCol6);
| |
- | // inCol6.innerHTML = ' ';
| |
- | var inSpacer4 = document.createElement("img");
| |
- | inSpacer4.setAttribute('src',zoomImagesURI+'spacer.gif');
| |
- | inSpacer4.setAttribute('height', '1');
| |
- | inSpacer4.setAttribute('width', '1');
| |
- | inSpacer4.style.display = 'block';
| |
- | inCol6.appendChild(inSpacer4);
| |
- |
| |
- | // <tr height="26">
| |
- | // <td width="27"><img src="/images/zoom-shadow6.png" width="27" height="26"</td>
| |
- | // <td background="/images/zoom-shadow7.png"> </td>
| |
- | // <td width="27"><img src="/images/zoom-shadow8.png" width="27" height="26"></td>
| |
- | // </tr>
| |
- | // </table>
| |
- |
| |
- | var inRow3 = document.createElement("tr");
| |
- | inRow3.style.height = '26px';
| |
- | inShadowTbody.appendChild(inRow3);
| |
- |
| |
- | var inCol7 = document.createElement("td");
| |
- | inCol7.style.width = '27px';
| |
- | inRow3.appendChild(inCol7);
| |
- | var inShadowImg7 = document.createElement("img");
| |
- | inShadowImg7.setAttribute('src', zoomImagesURI+'zoom-shadow6.png');
| |
- | inShadowImg7.setAttribute('width', '27');
| |
- | inShadowImg7.setAttribute('height', '26');
| |
- | inShadowImg7.style.display = 'block';
| |
- | inCol7.appendChild(inShadowImg7);
| |
- |
| |
- | var inCol8 = document.createElement("td");
| |
- | inCol8.setAttribute('background', zoomImagesURI+'zoom-shadow7.png');
| |
- | inRow3.appendChild(inCol8);
| |
- | // inCol8.innerHTML = ' ';
| |
- | var inSpacer5 = document.createElement("img");
| |
- | inSpacer5.setAttribute('src',zoomImagesURI+'spacer.gif');
| |
- | inSpacer5.setAttribute('height', '1');
| |
- | inSpacer5.setAttribute('width', '1');
| |
- | inSpacer5.style.display = 'block';
| |
- | inCol8.appendChild(inSpacer5);
| |
- |
| |
- | var inCol9 = document.createElement("td");
| |
- | inCol9.style.width = '27px';
| |
- | inRow3.appendChild(inCol9);
| |
- | var inShadowImg9 = document.createElement("img");
| |
- | inShadowImg9.setAttribute('src', zoomImagesURI+'zoom-shadow8.png');
| |
- | inShadowImg9.setAttribute('width', '27');
| |
- | inShadowImg9.setAttribute('height', '26');
| |
- | inShadowImg9.style.display = 'block';
| |
- | inCol9.appendChild(inShadowImg9);
| |
- | }
| |
- |
| |
- | if (includeCaption) {
| |
- |
| |
- | // CAPTION
| |
- | //
| |
- | // <div id="ZoomCapDiv" style="margin-left: 13px; margin-right: 13px;">
| |
- | // <table border="1" cellpadding="0" cellspacing="0">
| |
- | // <tr height="26">
| |
- | // <td><img src="zoom-caption-l.png" width="13" height="26"></td>
| |
- | // <td rowspan="3" background="zoom-caption-fill.png"><div id="ZoomCaption"></div></td>
| |
- | // <td><img src="zoom-caption-r.png" width="13" height="26"></td>
| |
- | // </tr>
| |
- | // </table>
| |
- | // </div>
| |
- |
| |
- | var inCapDiv = document.createElement("div");
| |
- | inCapDiv.setAttribute('id', 'ZoomCapDiv');
| |
- | inCapDiv.style.position = 'absolute';
| |
- | inCapDiv.style.visibility = 'hidden';
| |
- | inCapDiv.style.marginLeft = 'auto';
| |
- | inCapDiv.style.marginRight = 'auto';
| |
- | inCapDiv.style.zIndex = '501';
| |
- |
| |
- | inBody.insertBefore(inCapDiv, inZoombox.nextSibling);
| |
- |
| |
- | var inCapTable = document.createElement("table");
| |
- | inCapTable.setAttribute('border', '0');
| |
- | inCapTable.setAttribute('cellPadding', '0'); // Wow. These honestly need to
| |
- | inCapTable.setAttribute('cellSpacing', '0'); // be intercapped to work in IE. WTF?
| |
- | inCapDiv.appendChild(inCapTable);
| |
- |
| |
- | var inTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
| |
- | inCapTable.appendChild(inTbody);
| |
- |
| |
- | var inCapRow1 = document.createElement("tr");
| |
- | inTbody.appendChild(inCapRow1);
| |
- |
| |
- | var inCapCol1 = document.createElement("td");
| |
- | inCapCol1.setAttribute('align', 'right');
| |
- | inCapRow1.appendChild(inCapCol1);
| |
- | var inCapImg1 = document.createElement("img");
| |
- | inCapImg1.setAttribute('src', zoomImagesURI+'zoom-caption-l.png');
| |
- | inCapImg1.setAttribute('width', '13');
| |
- | inCapImg1.setAttribute('height', '26');
| |
- | inCapImg1.style.display = 'block';
| |
- | inCapCol1.appendChild(inCapImg1);
| |
- |
| |
- | var inCapCol2 = document.createElement("td");
| |
- | inCapCol2.setAttribute('background', zoomImagesURI+'zoom-caption-fill.png');
| |
- | inCapCol2.setAttribute('id', 'ZoomCaption');
| |
- | inCapCol2.setAttribute('valign', 'middle');
| |
- | inCapCol2.style.fontSize = '14px';
| |
- | inCapCol2.style.fontFamily = 'Helvetica';
| |
- | inCapCol2.style.fontWeight = 'bold';
| |
- | inCapCol2.style.color = '#ffffff';
| |
- | inCapCol2.style.textShadow = '0px 2px 4px #000000';
| |
- | inCapCol2.style.whiteSpace = 'nowrap';
| |
- | inCapRow1.appendChild(inCapCol2);
| |
- |
| |
- | var inCapCol3 = document.createElement("td");
| |
- | inCapRow1.appendChild(inCapCol3);
| |
- | var inCapImg2 = document.createElement("img");
| |
- | inCapImg2.setAttribute('src', zoomImagesURI+'zoom-caption-r.png');
| |
- | inCapImg2.setAttribute('width', '13');
| |
- | inCapImg2.setAttribute('height', '26');
| |
- | inCapImg2.style.display = 'block';
| |
- | inCapCol3.appendChild(inCapImg2);
| |
- | }
| |
- | }
| |
- | </script>
| |
| </body> | | </body> |
| </html> | | </html> |