Zum Inhalt springen

jh_magnificpopup und Typo3 Version 7.6.6

Erstellt am 27. April 2016 · 2 Antworten · letzte Antwort am 21. Juni 2016

Tags: Bilder, TYPO3 7, Frage

kruempi ·

Hallo liebe Typo3-Experten,

ich versuche grad die Extension jh_magnificpopup in mein neues Typo3 7.6.6 einzubauen. Während mir das in meinem alten 6.2er-Typo3 noch problemlos gelang, stehe ich jetzt ziemlich auf dem Schlauch.

Ich habe die Extension installiert, in mein Template includiert und es erstmal in dieser Variante probiert - nix tut sich, Bilder werden zwar vergrößert, aber nicht in der Lightbox sondern im gleichen Browserfenster wie die Homepage. Neben der Lightbox setze ich folgende Extensions ein:
Mask, Gridelements, Icon Font, Datec Losungen, News sowie Image Cropscaling

Soweit ich es beurteilen kann, werden weder die CSS der Lightbox noch die Javascripts geladen. Auch wenn ich im Konstanten-Editor andere Pfade für all diese Dateien angebe, findet sich im Quellcode nichts.

Ich bin für jede Hilfe dankbar,
Jochen

Anbei noch mein TS:

Constants:

plugin.tx_news {
        view {
                templateRootPath = fileadmin/templates/news/Templates/
                partialRootPath = fileadmin/templates/news/Partials/
                layoutRootPath = fileadmin/templates/news/Layouts/
        }
}

styles.content.imgtext.linkWrap.width = 800
styles.content.imgtext.linkWrap.lightboxEnabled = 1
styles.content.imgtext.linkWrap.lightboxCssClass = lightbox
styles.content.imgtext.linkWrap.lightboxRelAttribute = lightbox[{field:uid}]

styles.content.imgtext.maxWInText = 0
styles.content.loginform.pid = 0

plugin.tx_jhmagnificpopup.includeMagnificpopupJs = fileadmin/templates/js/jquery.magnific-popup.min.js
plugin.tx_jhmagnificpopup.includeFilterIsImageFileJs = fileadmin/templates/js/jquery.filter-isImageFile.min.js
plugin.tx_jhmagnificpopup.includeMagnificpopupCss = fileadmin/templates/css/magnific-popup.css
plugin.tx_jhmagnificpopup.magnificpopup.support.tx_news = 1
plugin.tx_jhmagnificpopup.view.partialRootPath = fileadmin/templates/magnific-popup/Partials/
plugin.tx_jhmagnificpopup.view.templateRootPath = fileadmin/templates/magnific-popup/Templates/
plugin.tx_jhmagnificpopup.view.layoutRootPath = fileadmin/templates/magnific-popup/Layouts/

Setup:

page < temp.mask.page

tt_content.stdWrap.innerWrap >
config.locale_all = de_DE
config.htmlTag_langKey = de
config.metaCharset = utf-8
config.sys_language_uid = 0
config.language = de
config.locale_all = de_DE.utf-8

config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)<span style="display:none">nospam</span>

config.contentObjectExceptionHandler = 0

page.meta{
    keywords.field = keywords
    keywords.ifEmpty (
         blabla
    )
    description.field = description
    description.ifEmpty (
         Beispielhomepage
    )
    robots = INDEX,FOLLOW
}

page.headerData.5 = TEXT
page.headerData.5.value (
    <meta name="viewport" content="width=device-width, initial-scale=1" />
)

page.headerData.10 = TEXT
page.headerData.10.value (
    <!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js -->
    <!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
)

page.config.noPageTitle = 2
page.headerData.20 = TEXT
page.headerData.20.field = nav_title // title
page.headerData.20.wrap = <title>Beispielseite:&nbsp;|</title>

page.includeCSS {
  file1 = fileadmin/templates/css/bootstrap.min.css
  file2 = fileadmin/templates/css/customized-AuL.css
  file3 = fileadmin/templates/font-awesome/css/font-awesome.min.css
}

page.10.file.stdWrap.cObject.default.value = fileadmin/templates/tmpl_startseite.html

page.10.file.stdWrap.cObject {
        2 = TEXT
        2.value = fileadmin/templates/tmpl_folgeseite_ganzebreite.html
}

page.10.file.stdWrap.cObject {
        3 = TEXT
        3.value = fileadmin/templates/tmpl_folgeseite.html
}

page.includeJSFooter {
  1 = https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
  1.external = 1
  1.forceOnTop = 1
  2 = http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
  2.external = 1
  3 = fileadmin/templates/js/bootstrap.min.js
  4 = fileadmin/templates/js/carousel.js
}

lib.carousel < lib.slider

lib.content < temp.mask.content
lib.content.select.where = colPos=0

lib.sidebar < temp.mask.content
lib.sidebar.select.where = colPos=301

lib.navbar-header = RECORDS
lib.navbar-header{
  tables = tt_content
  source = 34
  }

lib.footerleft = RECORDS
lib.footerleft{
  tables = tt_content
  source = 32
  }

lib.footermiddle = RECORDS
lib.footermiddle{
  tables = tt_content
  source = 31
  }

lib.footerright = RECORDS
lib.footerright{
  tables = tt_content
  source = 30
  }


###Losungen###
plugin.tx_dateclosungen_losungen {
  view {
    templateRootPaths {
      0 = {$plugin.tx_dateclosungen.view.templateRootPath}
      1 = fileadmin/templates/losungen/Templates/
    }
    partialRootPaths {
      0 = {$plugin.tx_dateclosungen.view.partialRootPath}
      1 = fileadmin/templates/losungen/Partials/
    }
    layoutRootPaths {
      0 = {$plugin.tx_dateclosungen.view.layoutRootPath}
      1 = fileadmin/templates/losungen/Layouts/
    }
  }
}

plugin.tx_dateclosungen_losungen {
  settings {
    display {
            dateFormat = %A, %e. %B %Y
            licenses {
              0 {
                text = © Evangelische Brüder-Unität
                url = http://www.ebu.de/
              }
              1 {
                text =
                url =
              }     
            }
    }
  }
}

plugin.tx_news {
  settings {
    facebookLocale = de_DE
    googlePlusLocale = de
    disqusLocale = de
  }
}

plugin.tx_news.settings.detail {
      # media configuration
      media {
        image {
          maxWidth = 282
          maxHeight =

          # Get lightbox settings from css_styled_content
          lightbox {
            enabled = {$styles.content.imgtext.linkWrap.lightboxEnabled}
            class = {$styles.content.imgtext.linkWrap.lightboxCssClass}
            width = {$styles.content.imgtext.linkWrap.width}
            height = {$styles.content.imgtext.linkWrap.height}
            rel = lightbox[myImageSet]
          }
        }

        video {
          width = 282
          height = 300
        }
      }
    }
CrocodileR ·

Hallo,

ich habe genau das gleiche Problem, schon alles mögliche ausprobiert, aber die Extension wird ums verrecken nicht geladen :-( Alle anderen Extensions, die ich im Einsatz habe laufen ohne Probleme. Das einzige, was diese tut, ist dem Vergrößerungslink eine class magnificpopup zuweisen...

Über Hilfe wäre ich echt dankbar!

kruempi ·

Sorry für die späte Antwort, falls es noch hilft: Ich hatte Kontakt mit dem Autor von jh_magnificpopup, er hat das Problem gelöst. Hintergrund war bei mir, dass in der ersten Zeile meines Typo3-Templates page überschrieben wird für die Extension Mask (page < temp.mask.page). Dadurch, so Jonathan Heilmann, sei es eingefügten Extensions nicht möglich automatisch Ergänzungen an page vorzunehmen.

Er empfahl Ergänzungen an meinem Template mit denen es bei mir wieder problemlos klappt:

bei page.includeCSS
## add css for extension jh_magnificpopup
tx_jhmagnificpopup10 = {$plugin.tx_jhmagnificpopup.includeMagnificpopupCss}
tx_jhmagnificpopup10.if.isTrue = {$plugin.tx_jhmagnificpopup.includeMagnificpopupCss}

bei page.includeJSFooter
## add js for extension jh_mangificpopup
tx_jhmagnificpopup20 = {$plugin.tx_jhmagnificpopup.includeMagnificpopupJs}
tx_jhmagnificpopup20.if.isTrue = {$plugin.tx_jhmagnificpopup.includeMagnificpopupJs}
tx_jhmagnificpopup25 = {$plugin.tx_jhmagnificpopup.includeFilterIsImageFileJs}
tx_jhmagnificpopup25.if.isTrue = {$plugin.tx_jhmagnificpopup.includeFilterIsImageFileJs}

und
## add inline js for extension jh_mangificpopup
page.jsFooterInline.109 < plugin.tx_jhmagnificpopup.setup.109

In meinen Constants ist definiert (als ausgelagerte Versionen von Templates,CSS und JS):
plugin.tx_jhmagnificpopup.includeMagnificpopupJs = fileadmin/templates/js/jquery.magnific-popup.min.js
plugin.tx_jhmagnificpopup.includeFilterIsImageFileJs = fileadmin/templates/js/jquery.filter-isImageFile.min.js
plugin.tx_jhmagnificpopup.includeMagnificpopupCss = fileadmin/templates/css/magnific-popup.css
plugin.tx_jhmagnificpopup.magnificpopup.support.tx_news = 1
plugin.tx_jhmagnificpopup.view.partialRootPath = fileadmin/templates/magnific-popup/Partials/
plugin.tx_jhmagnificpopup.view.templateRootPath = fileadmin/templates/magnific-popup/Templates/
plugin.tx_jhmagnificpopup.view.layoutRootPath = fileadmin/templates/magnific-popup/Layouts/