Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Style Edited #699

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Style Edited #699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 51 additions & 1 deletion example1/colorbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,54 @@
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
}

/* LAyout style */
body {
color: #2D2D2D;
font-size: 16px;
background: #FAFAFA;
font-family: Verdana, Geneva, sans-serif;
}
* {
padding: 0;
margin: 0;
text-decoration: none;
}
.container {
width: 978px;
margin: 0 auto;
}
#header {
background: #2D2D2D;
height: 200px;
line-height: 200px;
text-align: center;
width: 100%;
color: #fff;
margin-bottom: 40px;
}
#header h1 { font-size: 46px; }
h2 {
clear: both;
font-size: 25px;
line-height: 110%;
margin: 0 0 10px 0;
}
.container p {
float: left;
margin-bottom: 20px;
}
.group1, .group2, .group3, .group4, .group5, .retina, .non-retina,
.ajax, .youtube, .vimeo, .iframe, .inline, .callbacks {
color: #fff;
float: left;
padding: 5px 10px;
font-size: 14px;
border-radius: 5px;
background: #D87300;
margin: 0 10px 0 0;
display: inline-block;
}
.ajax, .youtube, .vimeo, .iframe { margin-bottom: -10px; }
.callbacks { float: none; }
78 changes: 40 additions & 38 deletions example1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
Expand Down Expand Up @@ -43,41 +38,48 @@
</script>
</head>
<body>
<h1>Colorbox Demonstration</h1>
<h2>Elastic Transition</h2>
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Fade Transition</h2>
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Slideshow</h2>
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Other Content Types</h2>
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="R&ouml;yksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>

<h2>Demonstration of using callbacks</h2>
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>

<header id="header">
<h1>Colorbox Demonstration</h1>
</header>

<section class="container">
<h2>Elastic Transition</h2>
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Fade Transition</h2>
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Slideshow</h2>
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Other Content Types</h2>
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="R&ouml;yksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>

<h2>Demonstration of using callbacks</h2>
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>


<h2>Retina Images</h2>
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>

<h2>Retina Images</h2>
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>
</section>

<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
Expand Down
51 changes: 51 additions & 0 deletions example2/colorbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,54 @@
.cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}


/* LAyout style */
body {
color: #2D2D2D;
font-size: 16px;
background: #FAFAFA;
font-family: Verdana, Geneva, sans-serif;
}
* {
padding: 0;
margin: 0;
text-decoration: none;
}
.container {
width: 978px;
margin: 0 auto;
}
#header {
background: #2D2D2D;
height: 200px;
line-height: 200px;
text-align: center;
width: 100%;
color: #fff;
margin-bottom: 40px;
}
#header h1 { font-size: 46px; }
h2 {
clear: both;
font-size: 25px;
line-height: 110%;
margin: 0 0 10px 0;
}
.container p {
float: left;
margin-bottom: 20px;
}
.group1, .group2, .group3, .group4, .group5, .retina, .non-retina,
.ajax, .youtube, .vimeo, .iframe, .inline, .callbacks {
color: #fff;
float: left;
padding: 5px 10px;
font-size: 14px;
border-radius: 5px;
background: #D87300;
margin: 0 10px 0 0;
display: inline-block;
}
.ajax, .youtube, .vimeo, .iframe { margin-bottom: -10px; }
.callbacks { float: none; }
77 changes: 39 additions & 38 deletions example2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
Expand Down Expand Up @@ -43,41 +38,47 @@
</script>
</head>
<body>
<h1>Colorbox Demonstration</h1>
<h2>Elastic Transition</h2>
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Fade Transition</h2>
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Slideshow</h2>
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Other Content Types</h2>
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="R&ouml;yksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>

<h2>Demonstration of using callbacks</h2>
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>

<header id="header">
<h1>Colorbox Demonstration</h1>
</header>

<section class="container">
<h2>Elastic Transition</h2>
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Fade Transition</h2>
<p><a class="group2" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
<p><a class="group2" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group2" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a class="group3" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group3" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group3" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Slideshow</h2>
<p><a class="group4" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group4" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group4" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

<h2>Other Content Types</h2>
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='youtube' href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="R&ouml;yksopp: Remind Me">Flash / Video (Iframe/Direct Link To Vimeo)</a></p>
<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>

<h2>Demonstration of using callbacks</h2>
<p><a class='callbacks' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>


<h2>Retina Images</h2>
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>
<h2>Retina Images</h2>
<p><a class="retina" href="../content/daisy.jpg" title="Retina">Retina</a></p>
<p><a class="non-retina" href="../content/daisy.jpg" title="Non-Retina">Non-Retina</a></p>
</section>

<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
Expand Down
51 changes: 51 additions & 0 deletions example3/colorbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,54 @@
#cboxNext:hover{background-position:bottom right;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}


/* LAyout style */
body {
color: #2D2D2D;
font-size: 16px;
background: #FAFAFA;
font-family: Verdana, Geneva, sans-serif;
}
* {
padding: 0;
margin: 0;
text-decoration: none;
}
.container {
width: 978px;
margin: 0 auto;
}
#header {
background: #2D2D2D;
height: 200px;
line-height: 200px;
text-align: center;
width: 100%;
color: #fff;
margin-bottom: 40px;
}
#header h1 { font-size: 46px; }
h2 {
clear: both;
font-size: 25px;
line-height: 110%;
margin: 0 0 10px 0;
}
.container p {
float: left;
margin-bottom: 20px;
}
.group1, .group2, .group3, .group4, .group5, .retina, .non-retina,
.ajax, .youtube, .vimeo, .iframe, .inline, .callbacks {
color: #fff;
float: left;
padding: 5px 10px;
font-size: 14px;
border-radius: 5px;
background: #D87300;
margin: 0 10px 0 0;
display: inline-block;
}
.ajax, .youtube, .vimeo, .iframe { margin-bottom: -10px; }
.callbacks { float: none; }
Loading