Slideshow prev/next customization

pditeman / 2013-07-07 17:54:54   


Hi all,

first a warning that my coding knowledge is next to nothing/has evolved over the course of building the site but not by much.

site: pkworryshop.com/

I've been having a few issues regarding the prev/next buttons in the slideshow format.

1. I would like the prev/next buttons to align with the right hand side of each image directly beneath the captioning. I have attempted to float the images right under #slideshow-nav in the slideshow.css which results in aligning them to the right-hand side of the screen, instead of the image. I figure that I need to edit the slideshow-nav div container to be the same width as the container for the slideshow images so that I can then float:right and have the prev/next buttons line up with the image. But I have no idea where/how I would do this or if it is even the best way. All of the messing around I have done is only affecting what is inside the container instead of the container itself.

2. I would also like to change the "previous | next" text to "< >" arrows, I know you need to format it correctly to avoid breaking the code, and have attempted to change the code using this thread: indexhibit.org/forum/thread/17809/ as guidance but I keep getting the same error message:

Parse error: syntax error, unexpected T_STRING in /homez.9/atravers/www/ndxzsite/plugin/format.slideshow.php on line 233

Each time I have to re-install the php file to correct it and I have attempted editing with all other css/php files in their original state(no customizations) and have gotten the same result. I can't figure out whats going on. (sorry if I should have posted this part in previous thread, thought it better to consolidate questions)

a big thank you to everyone for all their hard work!

arsondpi / 2013-07-07 21:35:38   

Hmmm - to do this properly you'd need to edit the structure of html or... you can try this. Open the format.slideshow.php and edit line 201 to:

  1. $nav = "nn<div id='slideshow-nav' class='$nav_balance' style='width: " . $image['media_x'] . "px; text-align: right;'>n";

As for your second question you need to encode these characters as they may confuse php:
&lt; for < and &gt; for >.

pditeman / 2013-07-07 23:03:02   

Thanks you for the quick response,

hmm, when I edit that code into line 201 I end up with the same error message:

Parse error: syntax error, unexpected T_STRING in /home/pditeman/pkworryshop.com/ndxzsite/plugin/format.slideshow.php on line 233

which is the same error message that I end up with when I try to edit the text of the "previous |next", using "<" , ">" or even just another word.

pditeman / 2013-07-07 23:07:07   

and by "" I mean the encoded characters sorry that seemed confusing.

arsondpi / 2013-07-08 07:05:06   

I don't know what could be wrong. I tried both customizations in my server and worked fine.
I assume that you're editing things in a code editor, right?

pditeman / 2013-07-08 22:34:17   

okay so issue partially solved,

I wasn't using a code editor (beginner mistake!) but downloading one and using it to edit the code took care of the Parse error.

I was able to change the text of "previous | next" just fine.

But now when I attempt to edit line 201 with the code you gave me for the alignment of the prev/next buttons the buttons just disappear entirely from the website.

arsondpi / 2013-07-09 07:33:21   

oops - I've been editing on an already customized slideshow format.
Find line 191 where:

  1. $nav = "nn<div id='slideshow-nav' class='$nav_balance'>n";

and change it to

  1. $nav = "nn<div id='slideshow-nav' class='$nav_balance' style='width: " . $image['media_x'] . "px; text-align: right;'>n";
arsondpi / 2013-07-09 07:35:21   

* before each n there is a backslash.

pditeman / 2013-07-09 12:21:36   

I am almost done with the questions I promise!

The code works great for the most part!

The only issue now is that the prev/next buttons align for horizontally-oriented images but not for the vertically-oriented ones. (this was part of the problem when I was trying to change it through margins/padding)

Is the best way to fix this to manually change each vertically oriented image? If so where is the best place to do this? My hunch is that there is some rule that I can apply to all the images but it might be beyond the scope of my knowledge. I will attempt to mess around with it myself when I return from work.

arsondpi / 2013-07-09 12:30:51   

When you apply a certain size, for example 700px, the size applies for width and height.
Thus navigation does not really sit flush with the caption etc.

Did you try uploading the images in their actual size (full px)?

If it's still not working I suggest to export your portrait images in a landscape format (including white space) from your image editor (photoshop etc)
Meaning that the portrait image is aligned right in a landscape image.

pditeman / 2013-07-10 03:15:11   

I ended up exporting my portrait images through photoshop with white space to orient them landscape, worked fine.

arsondpi, thank you so much for your patience and assistance!

This thread has been closed, thank you.