Artetics.com - Start Point For Your Web Site

I am trying to do the simplest thing and I can’t figure it out from forum posts or documentation page.

I have a series of thumbs on a page illustrating parts of larger photo--since there is no way to do a hotspot link. Each thumb needs to link to one enlargement.

Plugin is installed and enabled.

Enlargements are in images/stories/installations
Thumbs are in images/stories/installations/thumbs

Should I have a path entered in the plugin or only locally?

What is the plugin and link code I would use to create the popup from the thumb to enlargement, as on your demo images examples?

Tried to check this out in source code, but it was completely unclear. These instructions:

Image: <a href="/images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

generate a list of index errors.

I am developing locally so cannot give you url.

Also you gave me this reference for making title area larger:
pretty photo title css pp_description
.pp_description{display: none;margin:0 0 5px 0;}
How would I alter this?

Thanks—
Twelva

You can use the following plugin code:

{artprettyphoto path="images" thumbnailPath="images/thumbs" /}

where images folder contains the files with the same names as images/thumbs folder.

images/thumbs/1.jpg is thumbnail of images/1.jpg, etc.

This will show the thumbnails, which when clicked will show appropriate full size image.

CSS style can be changed in plugins/content/artprettyphoto/css/prettyPhoto.css file.

Regards,
artetics.com team

Thanks, I appreciate the fast answer.
I'm not sure you understood that I want to link each thumb separately, because each have to be in a specific place on the page, not have them loaded automatically. Will this work?

My attempt to translate what you said is this:

<td align="center">{artprettyphoto path="images/stories/installations" thumbnailPath="images/stories/installations/thumbs" /}<a href="cusp-dressform.jpg rel=" title="Description"><img src="cusp-dressform.jpg" alt="Picture 1 title" /></a></td>

where the image names are the same in main and thumbs directory.

I tried it with the path set in the plugin and with it empty.

This produces in the editor
{artprettyphoto path="images/stories/installations" thumbnailPath="images/stories/installations/thumbs" /}Picture 1 title

and in the browser:
Notice: Undefined index: singleImage in C:\O-WAMP\www\JOOMLA\plugins\content\artprettyphoto.php on line 80

Notice: Undefined index: singleText in C:\O-WAMP\www\JOOMLA\plugins\content\artprettyphoto.php on line 81

Notice: Undefined index: flickr in C:\O-WAMP\www\JOOMLA\plugins\content\artprettyphoto.php on line 83
Etc.

Can you clarify?
Thanks again.

The notices you see are because of inappropriate error_reporting PHP setting - we have sent you the updated extension which tries to set this to appropriate value.

To show thumbnails separately you can use the following code:

<a href="images/1.jpg" title="My image 1" rel="prettyphoto"><img src="images/thumbs/1.jpg" /></a>
<a href="images/2.jpg" title="My image 2" rel="prettyphoto"><img src="images/thumbs/2.jpg" /></a>
<a href="images/3.jpg" title="My image 3" rel="prettyphoto"><img src="images/thumbs/3.jpg" /></a>

{artprettyphoto /}

Please note that each link has rel attribute and {artprettyphoto /} code is used once. This way all links with prettyphoto attribute will get lightbox effect.

Regards,
artetics.com team

Team—
Thanks for the update; I’m no longer getting that error.

But I have tried every combination of your instructions

<a href="images/3.jpg" title="My image 3" rel="prettyphoto"><img src="images/thumbs/3.jpg" /></a>

that I can think of, and my result is that every enlargement in the directory loads with a link to itself which shows up in the prettyphoto lightbox as a slideshow with back and forward arrows and no title. I need a single image display with a title.

Can you please explain this very simply, as if you were writing PrettyPhoto for Dummies: link a single image to an enlargement?

1) what is the relation between the path in the plugin, the path in the “ahref” link, and the “artprettyphoto path=”call? Which of these paths should be set to what, are they mutually exclusive?

2) I have a number of installations in separate directories which I will be setting up on different pages/

3) If my enlargement directory is (I changed these)
images/stories/installations/cusp
and thumbs is
images/stories/installations/cusp-tn

In order to get ONE thumbnail to display ONE enlargement with title, what exactly should the code be including plugin path or “ artprettyphoto path=” settings ?

Thanks so much.

Plugin works depending on its attributes.

Here are some examples:

1. When path attribute is set:

{artprettyphoto path="images" width="100" height="100"/}
This plugin code makes plugin find all images in a folder JOOMLA_DIR/images and show the thumbnails for them. Each thumbnail is resized to 100x100 pixels full size image. Each thumbnail when clicked will show large image in a lightbox.

2. When path and thumbnailPath attributes are set:
{artprettyphoto path="images" thumbnailPath="images/thumbs" width="100" height="100"/}
Plugin will show all thumbnails from images/thumbs folder and assign full size images from images folder to them (thumbnails and full size images should have the same filenames).

3.
<a href="images/1.jpg" title="My image 1" rel="prettyphoto"><img src="images/thumbs/1.jpg" /></a>
<a href="images/2.jpg" title="My image 2" rel="prettyphoto"><img src="images/thumbs/2.jpg" /></a>
{artprettyphoto /}

Since path attribute is not indicated then plugin finds all links with rel="prettyphoto" on the page and adds lightbox effect to them - these are 2 links above.

This means that images/thumbs/1.jpg thumbnail when clicked will show images/1.jpg full size image in a lightbox with "My image 1" title.

This means that to get one thumbnail to show one enlargement with title you can use the following code:

<a href="images/stories/installations/cusp/1.jpg" title="My image 1" rel="prettyphoto"><img src="images/stories/installations/cusp-tn/1.jpg" /></a>

{artprettyphoto /}

Regards,
artetics.com team

Thanks so much for your detailed answer. When I use just the path setting, I do get all thumbs to display with links to lightboxes.

But for the single image popup as below:
<a href="images/stories/installations/cusp/dressform.jpg" title="My image 1" rel="prettyphoto"><img src="images/stories/installations/cusp-tn/cusp-dressform.jpg" /></a>
<a href="images/stories/installations/cusp/cusp-story1.jpg" title="My image 2" rel="prettyphoto"><img src="images/stories/installations/cusp-tn/cusp-story1.jpg" /></a> {artprettyphoto /}

I do get the two images to display. For the first link, I get
The requested URL /JOOMLA/images/stories/installations/cusp/dressform.jpg was not found on this server.
But image is there.
For the second link I get regular jpg link with no lightbox.

This is what displays in html source:
<a href="/JOOMLA/images/stories/installations/cusp/dressform.jpg" title="My image 1" rel="prettyphoto"><img src="/JOOMLA/images/stories/installations/cusp-tn/cusp-dressform.jpg" /></a>
<a href="/JOOMLA/images/stories/installations/cusp/cusp-story1.jpg" title="My image 2" rel="prettyphoto"><img src="/JOOMLA/images/stories/installations/cusp-tn/cusp-story1.jpg" /></a> <script type="text/javascript" charset="utf-8">jQuery(document).ready(function(){if (!window.prettyEnabled) {jQuery("a[rel^='prettyPhoto']".prettyPhoto({animationSpeed: "normal", padding: 40, opacity: 0.35, showTitle: true, allowresize: true, counter_separator_label: "/", theme: "light_rounded"});}if (!window.prettyEnabled) {window.prettyEnabled = true;}}); </script>


Is there any reason this would not be working on local WAMP server, or what am I doing wrong??
I appreciate your patience...

Hi, Team--
Any hope of getting this to work, or shall I look for another solution?
Thanks...

It's difficult to advise since this is on localhost.

Is it possible to upload the site on the net so we can have a look?
Or you can send us the page for investigation (just hit Ctrl+S i nFirefox and send us the archive of the page and all scripts).

Our email.

Regards,
artetics.com team