Zum Inhalt springen

jq_fancybox einbinden in Image Carousel

Erstellt am 13. Juni 2012 · 7 Antworten · letzte Antwort am 15. Juni 2012

Tags: Frage

andy-man ·

Hallo,
ich habe die Extension jq_fancybox eingebunden. Beim der normalen Bilddarstellung und den News funktioniert diese gut. Leider nicht beim Image Carousel.
Wie kann die Fancybox da einbinden?

Danke andy-man

andy-man ·

Hallo,
ich habe mal versucht die Fancybox in imagecircle und imagecarousel einzubauen.

plugin.tx_imagecycle_pi1 {
  cycle.normal.image {
    imageLinkWrap {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="{$plugin.jq_fancybox.rel}" rel="{$plugin.jq_fancybox.rel}"
        ATagParams.insertData = 1
      }
    }
  }
}

plugin.tx_imagecycle_pi2 {
  coin.normal.image {
    longdescURL >
    imageLink {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="{$plugin.jq_fancybox.rel}" rel="{$plugin.jq_fancybox.rel}"
        ATagParams.insertData = 1
      }
    }
  }
  coin.header.image.longdescURL >
  coin.content.image.longdescURL >
}

plugin.tx_imagecycle_pi3 {
  nivo.normal.image {
    longdescURL >
    imageLinkWrap {
      typolink >
      typolink {
        // Since imagecycle 2.2.1
        title {
          wrap = #htmlcaption-|
          data = register:caption_key
        }
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="{$plugin.jq_fancybox.rel}" rel="{$plugin.jq_fancybox.rel}"
        ATagParams.insertData = 1
      }
    }
  }
  nivo.header.image.longdescURL >
  nivo.content.image.longdescURL >
}

plugin.tx_imagecarousel_pi1 {
  cycle.normal.image {
    imageLinkWrap {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="{$plugin.jq_fancybox.rel}" rel="{$plugin.jq_fancybox.rel}"
        ATagParams.insertData = 1
      }
    }
  }
}

Leider bleibt der Eintrag in der class="" und rel="" leer.

Was muss ich denn da ändern?

andy-man ·

Hallo,
durch die Änderung der Zeile:

ATagParams = class="{$plugin.jq_fancybox.rel}" rel="{$plugin.jq_fancybox.rel}"

in

        ATagParams = class="jqfancybox" rel="fancybox"

funktioniert jetzt die Fancybox auch im Plugin imagecycle, doch leider noch nicht in diesem Bereich des imagecarousel.

plugin.tx_imagecarousel_pi1 {
  cycle.normal.image {
    imageLinkWrap {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="jqfancybox" rel="fancybox"
        ATagParams.insertData = 1
      }
    }
  }
}

plugin.tx_imagecarousel_pi2 {
  cycle.normal.image {
    imageLinkWrap {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="jqfancybox" rel="fancybox"
        ATagParams.insertData = 1
      }
    }
  }
}

Kann mir da jemand weiterhelfen?

Danke andy-man
andy-man ·

Hallo,
habe das Script geändert und die jq_fancybox funktioniert jetzt mit den Plugins.

plugin.tx_imagecycle_pi1 {
  cycle.normal.image {
    imageLinkWrap {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="jqfancybox" rel="fancybox"
        ATagParams.insertData = 1
      }
    }
  }
}

plugin.tx_imagecycle_pi2 {
  coin.normal.image {
    longdescURL >
    imageLink {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="jqfancybox" rel="fancybox"
        ATagParams.insertData = 1
      }
    }
  }
  coin.header.image.longdescURL >
  coin.content.image.longdescURL >
}

plugin.tx_imagecycle_pi3 {
  nivo.normal.image {
    longdescURL >
    imageLinkWrap {
      typolink >
      typolink {
        // Since imagecycle 2.2.1
        title {
          wrap = #htmlcaption-|
          data = register:caption_key
        }
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="jqfancybox" rel="fancybox"
        ATagParams.insertData = 1
      }
    }
  }
  nivo.header.image.longdescURL >
  nivo.content.image.longdescURL >
}

plugin.tx_imagecarousel_pi1 {
  carousel.normal.image {
    imageLinkWrap {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        ATagParams = class="jqfancybox" rel="fancybox"
        ATagParams.insertData = 1
      }
    }
  }
}

plugin.tx_imagecarousel_pi2 {
  carousel.normal.image {
    imageLinkWrap {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        parameter.wrap = " | "
        ATagParams = class="jqfancybox" rel="fancybox"
        ATagParams.insertData = 1
      }
    }
  }
}

andy-man

andy-man ·

Hallo,
jetz bin ich dabei auch das Plugin jfimageflow in einzubinden,
http://typo3.cms-jack.ch/de/erweiterungen/jfimageflow/
doch da funktioniert es leider noch nicht. Ich denke das es an dem Namen in der zweiten Zeile liegt.

plugin.tx_jfimageflow_pi1 {
  imageflow.normal.image {
    imageLinkWrap {
      typolink >
      typolink {
        title.data = register:caption
        parameter.override.cObject = IMG_RESOURCE
        parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
        parameter.override.cObject.file.maxW = 800
        parameter.override.cObject.file.maxH = 600
        parameter.wrap = " | "
        ATagParams = class="jqfancybox" rel="fancybox"
        ATagParams.insertData = 1
      }
    }
  }
}

andy-man

andy-man ·

Hallo,
vielen Dank für die Hilfe von Jürgen Furrer :-}. Beim Einbinden der jq_fancybox in jfimageflow muss ein JS Sript in die Optionen eingefügt werden, da das Öffnen der Bilder über onclick erfolgt.

onClick: function(){
  jQuery.fancybox({
    'padding': 0,
    'href': this.url,
    'title': 'Lorem ipsum dolor sit amet',
    'transitionIn': 'elastic',
    'transitionOut': 'elastic'
  });
}

Danke andy-man