---
title: "jq_fancybox einbinden in Image Carousel"
url: "https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel"
source: "typo3.net"
tags: ["Extensions","Bilder","Frage","JavaScript & AJAX"]
created: "2012-06-13"
last_reply: "2012-06-15"
replies: 7
solved: false
page: 1
pages: 1
lang: "de"
---

# jq_fancybox einbinden in Image Carousel

Extensions · 7 Antworten · gestartet 2012-06-13

## Eröffnungsbeitrag

**andy-man** · 2012-06-13 · [Beitrag #1](https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel/1)

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

## Antworten

### [#2](https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel/2) · skydivematy · 2012-06-13

Hi,
welche Extension Image Carousel ist es denn?
gruss
maty

### [#3](https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel/3) · andy-man · 2012-06-14

Hallo,
es ist die Extension imagecarousel von Juergen Furrer
Version: 1.9.6

andy-man

### [#4](https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel/4) · andy-man · 2012-06-14

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

```typoscript
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?

### [#5](https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel/5) · andy-man · 2012-06-14

Hallo,
durch die Änderung der Zeile:

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

in

```typoscript
        ATagParams = class="jqfancybox" rel="fancybox"
```

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

```typoscript
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
```

### [#6](https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel/6) · andy-man · 2012-06-14

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

```typoscript
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

### [#7](https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel/7) · andy-man · 2012-06-14

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.

```typoscript
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

### [#8](https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel/8) · andy-man · 2012-06-15

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.

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

Danke andy-man

---

Quelle: „jq_fancybox einbinden in Image Carousel“, typo3.net, https://www.typo3.net/d/110968-jq-fancybox-einbinden-in-image-carousel
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.