---
title: "Probleme mit der anzeige von Bildern"
url: "https://www.typo3.net/d/109658-probleme-mit-der-anzeige-von-bildern"
source: "typo3.net"
tags: ["Extensions","Entwicklung","Bilder","Frage"]
created: "2012-03-05"
last_reply: "2012-03-05"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# Probleme mit der anzeige von Bildern

Extensions › Entwicklung · 1 Antwort · gestartet 2012-03-05

## Eröffnungsbeitrag

**Dav88** · 2012-03-05 · [Beitrag #1](https://www.typo3.net/d/109658-probleme-mit-der-anzeige-von-bildern/1)

Hallo alle Zusammen,

da ich die Extensions von Shadowbox und Fanybox installiert habe möchte ich jetzt das Bilder per Klick sich mit dem Effekt "lightbox" öffnen.

Hier mein Quellcode:

```html
//Bilder-------------------------------------------------------				
			$sql_share_pic='SELECT * FROM `_picture` WHERE `deleted` =0 AND `hidden` =0';
		$res_share_pic=$GLOBALS['TYPO3_DB']->sql_query($sql_share_pic); 
		//Share-Items
		$anz_picture=0;
		while ($row_share_pic= $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res_share_pic)){
			if($anz_picture%4 == 0){
				$content_picture.='
			<div class="media_element">
				<ul>';
			}
			$content_picture.='
					<li class="view view-tenth"><img src="fileadmin/dateien/Share-Idea/Picture/thumbnails/'.$row_share_pic[picture].'" alt="Bild" /><div class="mask"><a href="fileadmin/dateien/Share-Idea/Picture/'.$row_share_pic[picture].'" class="detail">Lorem ipsum dolor<cite>Max Mustermann, 15</cite></a></div></li>';
			if($anz_picture%4 == 3){
				$content_picture.='
				</ul>
			</div>';
			}
			$anz_picture++;
		}
		
		if($anz_picture%4 != 0){
		$content_picture.='
				</ul>
			</div>';
		}

	//----------------------------------------------------------------------------------------	
	//--------------------------         AUSGABE                ------------------------------	
	//----------------------------------------------------------------------------------------	

//Bilder-------------------------------------------------------			
$content.='		</div>
	</div>
	<div class="media-photo">
		<div class="fotografiere"><a href=""><span></span>Fotografiere deine Idee</a></div>
		<div class="nav_media_slider">
			<div class="prev_media_slider">&larr;</div>
			<div class="next_media_slider"> &rarr;</div>
		</div>
		<div class="media_slider_elements" style="width:'.(ceil($anz_picture/4)*400).'px">';
		
		$content.=$content_picture;	
		

		
	$content.='	
	</div>
</div>';
		
		return $this->pi_wrapInBaseClass($content);
	}
}



if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/_share_idea/pi3/class.tx_shareidea_pi3.php'])	{
	include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/_share_idea/pi3/class.tx_shareidea_pi3.php']);
}

?>
```

**Meine JS Header:**

<script src="fileadmin/templates/js/jquery-1.7.1.min.js"></script>
   <script src="fileadmin/templates/js/jquery-ui-1.8.16.custon.min.js"></script>

<script src="fileadmin/templates/js/jquery.easing.1.3.js"></script>
   <script src="fileadmin/templates/js/jquery.scrollto.min.js"></script>
   <script src="fileadmin/templates/js/jquery.mousewheel-3.0.4.pack.js"></script>
   <script src="fileadmin/templates/js/jquery.fancybox-1.3.4.pack.js"></script>
   <script src="fileadmin/templates/js/head.js"></script>
   <script src="fileadmin/templates/js/swfobject.js"></script>
   <script src="fileadmin/templates/js/load_flash.js"></script>

<script type="text/javascript" src="<http://fast.fonts.com/jsapi/b40a02b3-05e1-4b9e-a71f-f1b65525b52b.js%22%3E%3C/script>>
   <script src="fileadmin/templates/js/vendor/jquery.ui.widget.js"></script>
   <script src="fileadmin/templates/js/jquery.iframe-transport.js"></script>
   <script src="fileadmin/templates/js/jquery.fileupload.js"></script>
   <script src="fileadmin/templates/js/iscroll.js"></script>
<script type="text/javascript" src="typo3temp/pmkshadowbox/base-de-DE-img/shadowbox.js"></script><link type="text/css" media="all" rel="stylesheet" href="typo3temp/pmkshadowbox/base-de-DE-img/shadowbox.css" /><script type="text/javascript">
		/* <![CDATA[ */			function shadowBoxInit() {
				Shadowbox.init({
					animate: 1,
					animateFade: 1,
					animSequence: 'sync',
					autoplayMovies: 1,
					continuous: 0,
					counterLimit: 10,
					counterType: 'skip',
					displayCounter: 1,
					displayNav: 1,
					enableKeys: 1,
					fadeDuration: 0.1,
					flashParams: {bgcolor:"#000000",allowfullscreen:"true"},
					flashVars: {},
					flashVersion: '9.0.0',
					handleOversize: 'resize',
					handleUnsupported: 'link',
					initialHeight: 160,
					initialWidth: 320,
					modal: 0,
					onChange: function() {},
					onClose: function() {},
					onFinish: function() {},
					onOpen: function() {},
					overlayColor: '#000000',
					overlayOpacity: 0.7,
					resizeDuration: 0.1,
					showOverlay: 1,
					showMovieControls: 1,
					skipSetup: 0,
					slideshowDelay: 0,
					viewportPadding: 20,
					preserveAspectWhileResizing: 1
				});
			}
Shadowbox.path = 'typo3temp/pmkshadowbox/base-de-DE-img/';shadowBoxInit();;/* ]]> */
		</script>

Ich weißt das ich bei der verlinkung <a rel="shadowbox;title=Titel für Shadowbox".... reinstetzen muss. Aber wie soll ich das im Quellcode umsetzen?

Bin noch neu in Typo3!

Gruss Davis

## Antworten

### [#2](https://www.typo3.net/d/109658-probleme-mit-der-anzeige-von-bildern/2) · mrtyu · 2012-03-05

Hi David,

wie wäre es mit:

```php
...
$content_picture.='<li class="view view-tenth">
<a rel="lightbox" href="<img src="fileadmin/dateien/Share-Idea/Picture/thumbnails/'.$row_share_pic[picture].'" alt="Bild" />"
<img src="fileadmin/dateien/Share-Idea/Picture/thumbnails/'.$row_share_pic[picture].'" alt="Bild" />
</a>
<div class="mask"><a href="fileadmin/dateien/Share-Idea/Picture/'.$row_share_pic[picture].'" class="detail">Lorem ipsum dolor<cite>Max Mustermann, 15</cite></a></div></li>';
...
```

Viele Grüße
mrtyu

---

Quelle: „Probleme mit der anzeige von Bildern“, typo3.net, https://www.typo3.net/d/109658-probleme-mit-der-anzeige-von-bildern
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.