Главная Обзор Помощь
Регистрация Вход
fgm
/
front__coursera-responsive-basics
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0
Просмотр исходного кода

Working gallery example.

Frederic G. MARAND 8 лет назад
Родитель
1c70b4cf9d
Сommit
8c0b883cda
12 измененных файлов с 107 добавлено и 15 удалено
Разделённый вид Показать статистику Diff
  1. 3 3
      public/aboutme.html
  2. 10 0
      public/css/gallery.css
  3. 10 0
      public/css/styles.css
  4. 1 1
      public/css/styles.css.map
  5. 12 0
      public/css/styles.scss
  6. BIN
      public/images/img_1.jpg
  7. BIN
      public/images/img_2.jpg
  8. BIN
      public/images/img_3.jpg
  9. BIN
      public/images/img_4.jpg
  10. BIN
      public/images/img_5.jpg
  11. 71 4
      public/index.html
  12. 0 7
      public/index.js

+ 3 - 3
public/aboutme.html
Просмотреть файл 

@@ -6,12 +6,12 @@
 
 
 	<body>
 
 		<a href="index.html">Home</a>
 
-		 &nbsp;
 
+    &nbsp;
 
 		<a href="aboutme.html">About me</a>
 
-		&nbsp;
 
+    &nbsp;
 
 		<a href="contact.html">Contact me</a>
 
 
-		<hr></hr>
 
+		<hr />
 
 
 		<h1>All about me</h1>

+ 10 - 0
public/css/gallery.css
Просмотреть файл 

@@ -0,0 +1,10 @@
 
+/* this is for the thumbnail images */
 
+.crop-img{
 
+  max-height:150px;
 
+  max-width:100%;
 
+}
 
+
 
+/* this is for the big main image */
 
+.large-img{
 
+  max-width:100%;
 
+}

+ 10 - 0
public/css/styles.css
Просмотреть файл 

@@ -7,4 +7,14 @@
 
   color: white;
 
   text-decoration: none; }
 
 
+/* use this to put borders around things... */
 
+.crop-img {
 
+  margin-bottom: 10px;
 
+  max-height: 150px;
 
+  max-width: 100%; }
 
+
 
+.large-img {
 
+  margin-top: 10px;
 
+  max-width: 100%; }
 
+
 
 /*# sourceMappingURL=styles.css.map */

+ 1 - 1
public/css/styles.css.map
Просмотреть файл 

@@ -1,6 +1,6 @@
 
 {
 
 "version": 3,
 
-"mappings": "AAAA,8CAA8C;AAC9C,YAAa;EACZ,MAAM,EAAE,eAAe;;AAGxB,gBAAiB;EACf,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI",
 
+"mappings": "AAAA,8CAA8C;AAC9C,YAAa;EACZ,MAAM,EAAE,eAAe;;AAGxB,gBAAiB;EACf,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;;AAGvB,8CAA8C;AAC9C,SAAU;EACR,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,KAAK;EACjB,SAAS,EAAE,IAAI;;AAGjB,UAAW;EACT,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,IAAI",
 
 "sources": ["styles.scss"],
 
 "names": [],
 
 "file": "styles.css"

+ 12 - 0
public/css/styles.scss
Просмотреть файл 

@@ -8,3 +8,15 @@
 
   color: white;
 
   text-decoration: none;
 
 }
 
+
 
+/* use this to put borders around things... */
 
+.crop-img {
 
+  margin-bottom: 10px;
 
+  max-height: 150px;
 
+  max-width: 100%;
 
+}
 
+
 
+.large-img {
 
+  margin-top: 10px;
 
+  max-width: 100%;
 
+}

BIN
public/images/img_1.jpg
Просмотреть файл


BIN
public/images/img_2.jpg
Просмотреть файл


BIN
public/images/img_3.jpg
Просмотреть файл


BIN
public/images/img_4.jpg
Просмотреть файл


BIN
public/images/img_5.jpg
Просмотреть файл


+ 71 - 4
public/index.html
Просмотреть файл 

@@ -1,11 +1,78 @@
 
 <html>
 
 	<head>
 
-    <script type="text/ecmascript" src="/lib/jquery-2.2.1.js"></script>
 
-    <script type="text/ecmascript" src="/index.js"></script>
 
+  <title>Image Gallery</title>
 
+  <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
 
+  <link rel="stylesheet" type="text/css" href="/css/styles.css" />
 
+  <script type="text/ecmascript" src="/lib/jquery-2.2.1.js"></script>
 
 	</head>
 
 
 	<body>
 
-    <h1 id="title" onclick="sayGoodbye();">
 
-      Hello</h1>
 
+		<!-- some header info (from Matthew's code) -->
 
+    <a href="index.html">Home</a>
 
+    &nbsp;
 
+    <a href="aboutme.html">About me</a>
 
+    &nbsp;
 
+    <a href="contact.html">Contact me</a>
 
+
 
+    <hr />
 
+
 
+    <div class="container">
 
+      <h1>Image Gallery</h1>
 
+
 
+      <!--
 
+         These are the thumbnail images. They are laid out using the bootstrap
 
+         grid. I have given them all the class "crop-image" which I use in the
 
+         css and the javascript code.
 
+      -->
 
+      <div class="row">
 
+        <div class="col-md-3">
 
+          <img class="crop-img"
 
+            src="/images/img_1.jpg"
 
+            alt="graffittied building"/>
 
+        </div>
 
+        <div class="col-md-3">
 
+          <img class="crop-img"
 
+            src="/images/img_3.jpg"
 
+            alt="display of cheese"/>
 
+        </div>
 
+        <div class="col-md-3">
 
+          <img class="crop-img"
 
+            src="/images/img_4.jpg"
 
+            alt="synethesizer workshop"/>
 
+        </div>
 
+        <div class="col-md-3">
 
+          <img class="crop-img"
 
+             src="/images/img_5.jpg"
 
+             alt="City night"/>
 
+        </div>
 
+      </div>
 
+      <!--
 
+        this is the large image which is
 
+        on a row of its own.
 
+        I will change it source in the
 
+        javascript
 
+      -->
 
+      <div class="row">
 
+        <div class="col-md-12">
 
+          <img id="bigImage"
 
+            class="large-img"
 
+            src="/images/img_1.jpg"
 
+            alt="graffittied building"/>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <script>
 
+      // when we click on the thumbnail
 
+      // we set the src attribute of the
 
+      // bit image to be the same as the
 
+      // src of the image we have clicked on
 
+      // ("this"). This loads the same
 
+      // image file into the big image
 
+      $(".crop-img").click(function(){
 
+        $("#bigImage").attr('src',
 
+          $(this).attr('src'));
 
+      });
 
+    </script>
 
 	</body>
 
 </html>

+ 0 - 7
public/index.js
Просмотреть файл 

@@ -1,7 +0,0 @@
 
-function sayGoodbye() {
 
-  $("#title").html("Goodbye");
 
-  $("#title").click(function () {
 
-    $("#title").html("Hello");
 
-    $("#title").off("click");
 
-  });
 
-}