STEP 1
--------------------------------------
Upload the contents of "upload" to your XF root directory (where index.php is located)


STEP 2
--------------------------------------
Import the XML product through your Admin CP
Admin CP > Home > Install Add-On > Select 'addon_prettyPhoto.xml'


STEP 3
--------------------------------------
Edit your "attached_files" template to include the box
Admin CP > Appearance > Templates > Search for 'attached_files' > Click 'attached_files' to edit

	STEP 3 a
	--------------------------------------
	find:
	<xen:require css="attached_files.css" />

	add below:
	<xen:require css="prettyPhoto.css" />
	<xen:require js="js/jquery/jquery.prettyPhoto.js" />


	STEP 3 b
	--------------------------------------
	find:
	<div class="thumbnail">
		<a href="{xen:link attachments, $attachment}" target="_blank">
			<img src="{xen:if $attachment.thumbnailUrl, $attachment.thumbnailUrl, '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}" />
		</a>
	</div>


	change to:

	<div class="thumbnail">
		<xen:if is="{$attachment.thumbnailUrl}">
			<a href="{xen:link attachments, $attachment}" target="_blank" rel="prettyPhoto[pp_gal]">
				<img src="{xen:if $attachment.thumbnailUrl, $attachment.thumbnailUrl, '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}" />
			</a>
		<xen:else />
			<a href="{xen:link attachments, $attachment}" target="_blank">
				<img src="{xen:if $attachment.thumbnailUrl, $attachment.thumbnailUrl, '@imagePath/xenforo/widgets/page.png'}" alt="{$attachment.filename}" />
			</a>
		</xen:if>
	</div>