gallerij krijg ik niet werkend

Wneedshelp · 5 sep 2015

Ik probeer een fotogallerij te maken met behulp van de volgende pagina -->http://www.mijn-eigen-website.nl/fotogalerij.html

Alle stappen gevolgd maar hij werkt niet zoals je kunt zien --> http://www.geertjeshoeve.nl/overig/waardstraat.html

De code van de pagina is

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>waardstraat35</title>
<link rel="stylesheet" href="overig/magnific-popup.css" />
<script src="overig/magnific.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.vergroot').magnificPopup({delegate: 'a', type:'image', gallery:{enabled:true} });
});
</script>
<style type="text/css">
#fotogallerij {
	position: absolute;
	width: 1069px;
	height: 115px;
	z-index: 1;
}
</style>
</head>

<body>
<div id="fotogallerij"><div class="vergroot"> <a href="fotoshuis/groot/voorgevel.jpg"><img src="fotoshuis/klein/1_3626b.jpg" width="133" height="200" /></a>
  <a href="fotoshuis/groot/glasinlood.jpg"><img src="fotoshuis/klein/glasinlood.jpg" width="133" height="200" /></a>
  <a href="fotoshuis/groot/gang.jpg"><img src="fotoshuis/klein/gang.jpg" width="133" height="200" /></a>
  <a href="fotoshuis/groot/eethoek.jpg"><img src="fotoshuis/klein/eethoek.jpg" width="200" height="133" /></a>
  <a href="fotoshuis/groot/naarbuiten.jpg"><img src="fotoshuis/klein/naarbuiten.jpg" width="148" height="200" /></a>
  <a href="fotoshuis/groot/zithoek.jpg"><img src="fotoshuis/klein/zithoek.jpg" width="200" height="133" /></a>
  <a href="fotoshuis/groot/keuken.jpg"><img src="fotoshuis/klein/keuken.jpg" width="200" height="133" /></a>
  <a href="fotoshuis/groot/achterkanthuis.jpg"><img src="fotoshuis/klein/achterkanthuis.jpg" width="200" height="133" /></a>
  <a href="fotoshuis/groot/tuin1.jpg"><img src="fotoshuis/klein/tuin1.jpg" width="200" height="133" /></a>
  <a href="fotoshuis/groot/tuin2.jpg"><img src="fotoshuis/klein/tuin2.jpg" width="200" height="133" /></a>
  <a href="fotoshuis/groot/schuur.jpg"><img src="fotoshuis/klein/schuur.jpg" width="133" height="200" /></a>
  <a href="fotoshuis/groot/overloop1.jpg"><img src="fotoshuis/klein/overloop1.jpg" width="200" height="136" /></a>
  <a href="fotoshuis/groot/badkamer.jpg"><img src="fotoshuis/klein/badkamer.jpg" width="133" height="200" /></a>
  <a href="fotoshuis/groot/overloop2.jpg"><img src="fotoshuis/klein/overloop2.jpg" width="133" height="200" /></a>
  <a href="fotoshuis/groot/slaapkamer.jpg"><img src="fotoshuis/klein/slaapkamer.jpg" width="200" height="133" /></a>
    <a href="fotoshuis/groot/gracht.jpg"><img src="fotoshuis/klein/gracht.jpg" width="200" height="133" /></a>
    <a href="fotoshuis/groot/zijlpoort.jpg"><img src="fotoshuis/klein/zijlpoort.jpg" width="200" height="133" /></a>
  </div></div>
</body>
</html>

verder heb ik die magnific-popup.css en magnific.js pagina aangemaakt.

Het staat allemaal in de map overig

Ik hoop dat iemand mij helpen kan

Aar · 5 sep 2015

The requested URL /overig/overig/magnific.js was not found on this server.

gezien het in dezelfde directory staat zal magnific.js voldoen. En jquery uiteraard ervoor inladen.

Wneedshelp · 6 sep 2015

oke oke.

de code is nu

HTML]
<script src="magnific.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.vergroot').magnificPopup({delegate: 'a', type:'image', gallery:{enabled:true} });
});
</script>
[HTML

het werkt wel al beter. Als je nu op een vergrootte foto drukt gaat hij naar de volgende. Maar het lijkt nog niet helemaal op hoe het moet worden (http://www.mijn-eigen-website.nl/fotogalerij.html)

Heeft dat met de jquery ervoor inladen te maken? Weet niet wat je daar mee bedoelt.

Aar · 7 sep 2015

Ja, dat klopt.

Kijk eens op lijn 1 en lijn 2

Wneedshelp · 7 sep 2015

PHP4U zei:
Ja, dat klopt.

Kijk eens op lijn 1 en lijn 2

Deze lijn 1 en 2?

HTML:

<!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">

Wat moet ik concreet doen om het goed te laten lopen?

Of waarschijniijk bedoel je deze

HTML]
<script src="magnific.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
[HTML

maar ik weet niet wat ik eraan moet veranderen

Aar · 8 sep 2015

Eerst jQuery, dan je Magnific

Wneedshelp · 8 sep 2015

PHP4U zei:
Eerst jQuery, dan je Magnific

Ik had die twee al omgedraaid zie ik maar dat mag helaas nog niet baten. Is er iets anders wat ik moet veranderen.

Aar · 8 sep 2015

Wneedshelp zei:
Ik had die twee al omgedraaid zie ik maar dat mag helaas nog niet baten. Is er iets anders wat ik moet veranderen.

Wordt de bijbehorende css ook ingeladen? En mogelijk moet je de functie voor de Magnify nog aanroepen in je JavaScript. Ik kan later vandaag eens uitgebreid kijken.

Aar · 8 sep 2015

En gekeken. Als ik de CSS open:

Code:

<p>The requested URL /overig/overig/magnific-popup.css was not found on this server.</p>

Het pad klopt dus niet.

Wneedshelp · 9 sep 2015

PHP4U zei:
En gekeken. Als ik de CSS open:

Code:

<p>The requested URL /overig/overig/magnific-popup.css was not found on this server.</p>

Het pad klopt dus niet.

Nah, sorry voor je tijd want dat had je als eerste al gezegd. Was ervan overtuigd dat ik dat al veranderd had. Super bedankt. Hij doet het. http://www.geertjeshoeve.nl/overig/waardstraat.html

Wel nog 1 laatste vraag. Weet je toevallig of het mogelijk is de achtergrond wat minder transparant te maken zodat het iets rustiger kijkt en anders niet transparant?

de css code is:

HTML:

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  filter: alpha(opacity=65);
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  filter: alpha(opacity=65);
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; }
 }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }

  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }

  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }

  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; }
 }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }

Aar · 9 sep 2015

Met opacity kan je de transparantie instellen.

Wneedshelp · 12 sep 2015

top! Dank je wel!!!

andre@home · 12 sep 2015

Mooi knus huisje... ziet er idd goed onderhouden uit, met nog de nodige authentieke eigenschappen.
Bekende buurt... mijn zoon woont "om de hoek" aan de andere kant v/d Oude Rijn in de Indische buurt.
Idd lekker kort, op een steenworp afstand v/h centrum.

Prijsgeschiedenis:
http://leiden.www.miljoenhuizen.nl/details/propnl/126248/Waardstraat-35-Leiden?searchtype=archive
En nu???

PS: Kadaster zegt eerste stenen in 1900...
http://leiden.kadasterdata.nl/waardstraat/35

De eerste stenen van dit pand werden in 1900 neergelegd.

Wneedshelp · 13 sep 2015

Dank je wel. En misschien toch even het jaartal aanpassen dan

andre@home zei:
Prijsgeschiedenis:
http://leiden.www.miljoenhuizen.nl/details/propnl/126248/Waardstraat-35-Leiden?searchtype=archive
En nu??? http://leiden.kadasterdata.nl/waardstraat/35

Dat is nog wel essentiele informatie idd. Nu € 169.000

gallerij krijg ik niet werkend

Wneedshelp

Gebruiker

Aar

Inventaris

Wneedshelp

Gebruiker

Aar

Inventaris

Wneedshelp

Gebruiker

Aar

Inventaris

Wneedshelp

Gebruiker

Aar

Inventaris

Aar

Inventaris

Wneedshelp

Gebruiker

Aar

Inventaris

Wneedshelp

Gebruiker

andre@home

Terugkerende gebruiker

Wneedshelp

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy