WordPress › Support » [Plugin: Portfolio Slideshow] Customization of the nav bar

lagalou
Member
Posted 1 year ago #

Hi!
First of all, thank you so much for this plugin. I have been looking for something like that for a long time! I've got so many compliments about my website since i added your plugin, it makes it a lot simpler and more intuitive as other stuff i tried before!

Following comments from friends, i would like to make a simple modification to the nav bar, but i am guessing it is in the php file, and i am unsure how to do.

It is simply that when I have only one image in a gallery, the prev/next option stays there, and people try to click on it but nothing happens and then they think it's broken. So I would like to either hide the prev/next, or show the numbers like when there's more than one image. In this case it would be "1 of 1".
Isn't there an easy way to do this?

An example of a page where I need this:
http://gaellelalonde.com/gallery/erwartungen/

Thanks again so much!
Gaelle Lalonde

http://wordpress.org/extend/plugins/portfolio-slideshow/
Dalton Rooney
Member
Posted 1 year ago #

Hi Gaelle,
Thanks for your feedback, I am glad to hear that you've found the plugin useful! I see exactly what you're saying, it's actually a little bug because the text "1 of 1" should be showing up, I don't know why it's not. Alternately I could hide the navigation div if there's only one image, which I think might make even more sense.

I have to ask, though... if you only have one image, why are you loading it with the slideshow plugin and not just inserting it directly into the page? I guess I never expected the plugin would be used for just a single image.

No worries, though, I will try to work something into the next version.

Regards,
Dalton
lagalou
Member
Posted 1 year ago #

Hi, thanks for your quick answer!
I wanted to put single images as slideshows too to keep the same layout with the title, the description and everything. I guess I can manage to do the same without using the slideshow, but it was easier that way.

Thanks, and keep up the good work!
Gaelle
physalis
Member
Posted 1 year ago #

Hey there,

since you seem actively monitoring your plugin-related posts, there is hope that I can fetch up on a former post up here and ask you whether it is possible to replace the nav's prev/next with the actual numbers of the images themselves. Meaning: if you have 4 images, can we have "1 2 3 4" while each number being clickable instead of the current nav bar?
As simple as it seems, your plugin seems exactly what I need once I got this number thing working ;).

Thanks in advance ;)
Dalton Rooney
Member
Posted 1 year ago #

Hi Physalis,
Yes, what you're asking for is definitely possible. In fact, I could even tell you how to do it, if you are reasonably good with PHP. Mike Alsup describes how to create a pager on his site here: http://jquery.malsup.com/cycle/pager11.html, so you just need add some javascript and get some additional info from the WP query that pulls the images.

The problem is that I'm super busy with work & freelance projects at the moment. So you'd have to do it yourself or I'd have to charge a few dollars to do it. I hope you understand.

Dalton
physalis
Member
Posted 1 year ago #
If you're interested in a temporary solution, this is the way to go:

Open up portfolio_slideshow.php in the correspondent plugin folder, go to line 97 and replace 97-111 with the following code
```
$(\'#portfolio-slideshow'.$i.'\').after(\'<div id=\"slides1\">\').cycle({
				fx: \''. $ps_trans . '\',
				speed: '. $ps_speed . ',
				timeout: '. $timeout . ',
				next: \'.slideshow-nav'.$i.' a.slideshow-next\',
				startingSlide: index,
				prev: \'.slideshow-nav'.$i.' a.slideshow-prev\',
				after:     onAfter,
				pager:  \'#slides'.$i.'\',
				manualTrump: false,
				cleartypeNoBg: true
		});
```
Save it, upload it, enjoy (yet unstyled) clickable image numbers. If you don't like them appear below the images, change the .after in line 97 of the new code to .before - simple as that.
Thanks, Dalton, for your help and support in the meantime ;).
Dalton Rooney
Member
Posted 1 year ago #

Really glad you figured this out. I will probably add this, or something like it, into a future version of the plugin.

One thing you might want to consider is to change

$(\'#portfolio-slideshow'.$i.'\').after(\'<div id=\"slides1\">\').cycle({

on the first line to

$(\'#portfolio-slideshow'.$i.'\').after(\'<div id="slides'.$i.'">\').cycle({

So that if multiple slideshows are loaded on the same page (an index page, maybe) it will continue to work.

Cheers,
Dalton
alphachris
Member
Posted 1 year ago #

Any Idea how I can include this or, to be more precise replace the previous / next - Navigation with this ? So it is possible to switch it on / off with shortcode.
Best
Christian
Dalton Rooney
Member
Posted 1 year ago #

Hi Christian,
It's definitely planned for a future version of the plugin. In the meantime, you will have to edit the plugin directly.

Regards,
Dalton
alphachris
Member
Posted 1 year ago #

Thanx, this is what I'm trying to do, but honestly I have no clue what generates the list of numbers for the slides....
Dalton Rooney
Member
Posted 1 year ago #

Hi Christian,
I haven't actually tested it, but Physalis's modification should work. Just take into account my recommendation to use the $i variable in the div ID so each ID is unique.

Dalton
physalis
Member
Posted 1 year ago #

It does ;).
alphachris
Member
Posted 1 year ago #

Hi Physalis, I know it does and it is great you figured this out. But what I'm looking for is a way to integrate this in the system. Or to be more precise to replace the " previous | next² navigation whith your code (btw, I'm using the navigation at bottom of slideshow). The thing is that I must be able to switch the navigation on / of on various pages whith shortcode (nav=false)
physalis
Member
Posted 1 year ago #

Hey there,
I am sure you'll figure out how to do this. I had help from a good friend of mine, as I am a complete JS newbie, so unfortunately I cannot help you much further as of yet ;).
robstothard
Member
Posted 1 year ago #

Firstly, thanks to Dalton. I appreciate the time you've taken to answer questions about your plugin on here.

Unfortunately I do still have a question.

I am unable to get my images to order in terms of their title. I've renamed them as Image1,Image2,....,Imagen and changed the script as suggested in a seperate thread to no avail.

ALSO - Question for PHYSALIS
How do I edit the format of the slide numbers? Is it represented by the div slide1? For example I would like a space between each number.

Thanks in advance.

Rob
Dalton Rooney
Member
Posted 1 year ago #

Hi Rob,
At the moment, the *only* supported method of reordering the slides is with drag and drop, in the gallery tab of the image uploader. The slideshow uses the menu order that you set there to order the slides, so renaming them won't actually do anything.

You could edit the plugin to change the query to order by title, I haven't tested it but it should definitely work.

I will let Physalis answer if he's still checking this thread, because I don't actually have the plugin setup that way and can't tell you. But I think using something like the element inspector in Chrome Developer Tools would be a step in the right direction.

I might change that first line to:

$(\'#portfolio-slideshow'.$i.'\').after(\'<div class="slides" id="slides'.$i.'">\').cycle({

and then the appropriate CSS would be something like:

.slides a { margin: 0 10px 0 0}

Not sure, though, just a guess!

Cheers,
Dalton
physalis
Member
Posted 1 year ago #

I'd opt for CSS modding as well - with a margin or padding you'd be good to have the numbers separated. Or are you depending on a real space character inbetween?
robstothard
Member
Posted 1 year ago #

Thanks for getting back to me.
I hadn't thought of the drag and drop. Sorry about that. Works great now thanks.

As for the numbers - perfect. Not sure why it's .slides a, not just .slides, but i'll live without the knowledge for now!!

Thanks again for your time.
physalis
Member
Posted 1 year ago #

It's .slides a, because the div containing the clickable numbers has the class "slides" and you don't want the container, but the a elements within the slides div to have the space. If you dig a bit more into CSS you'll soon understand what it means ;).
supersonique
Member
Posted 1 year ago #

Hi - This plugin is great and I have been using it on many sites I have designed and developed. I have probably used up the capabilities to customize my slideshows through css and shortcode. Does anyone know how to customize the prev/next navigation so that on the starting slide/image of the series, it only shows "next" and on the last one it only shows "prev"?

Sounds like logically i would need to get the number of images in the series, then the location of the current image displayed, if it's first set the slideshow-prev class to display:none, if it's last set the slideshow-prev to display:none. I know css well, but don't know how to implement that syntax-wise in the jquery or plugin's php file.

Any help is appreciated - thanks!
Dalton Rooney
Member
Posted 1 year ago #

Supersonique - any interest in helping me beta test 1.0? There are a few new features including the ability to turn off slideshow wrapping... so when you get to the end, the "Next" link is grayed out: http://madebyraygun.com/downloads/3

A word of warning - this has been tested pretty thoroughly on my server, but a lot of code has changed between the previous version and this one. I would test it out on a demo account before deploying it on a live site. Specifically take note that it uses jQuery 1.4.4. Most plugins I've tested it against work OK, but one that was really out of date had a problem with the new jQuery.

Cheers,
Dalton
supersonique
Member
Posted 1 year ago #

Sure - the site I'm making is still in beta, so I'll deploy it there, and send you the link.
supersonique
Member
Posted 1 year ago #

This is great, thank you.

With the version I had before (not sure the exact one but I installed it in late November of last year):

The home page used to have a fade transition of 1500 and cycled automatically with no "prev" or "next" navigation.

The product pages had no fade and did not cycle automatically - they were controlled manually with "prev" and "next" - the only problem was that I didn't want those to wrap - some only have two images and others have up to five images, but we wanted the user to know there weren't next or previous when they navigated. Anyways, I installed the beta version of 1.0 which seems to be working great (firefox and safari for mac), especially for the product pages.

URLs
home page:
http://bobsyouruncle.com.s110609.gridserver.com/
a product page:
http://bobsyouruncle.com.s110609.gridserver.com/dish-towels/

Some parts of the site (side nav) are still broken (still beta), however, the slideshows are working as described below.

I tweaked some css (perhaps some unnecessary lines of code in my css right now but I just wanted to get it done quickly & will clean up later), but I got the product pages to work exactly the way I wanted to, which saved me hours of work.

For now, the I can't replicate the home page exactly as before b/c there's no per-slideshow shortcode to do the following:
- make the slideshow wrap for that instance and
- make the transition speed 1500 for that instance (was able to do that because the transiton=none was enabled in that version, which i applied to the product pages)

It would be great to add those in, but understand that you're super busy. I wish I knew more php.

No big deal because there's only one home page and 60+ products so easy to just put in a more simple slideshow for the homepage.

Ideally would be great to use the plugin for both purposes, but the client wants the site live very soon.

Thanks again for making the new version available.
Dalton Rooney
Member
Posted 1 year ago #

Glad to hear that worked for you! I will see if I can get those features in before the final release. Might be a few days.

Dalton
supersonique
Member
Posted 1 year ago #

Thanks! For the time being I "ghetto-hacked" the portfolio_foot function with the is_home conditional to force the home page to do those things for launch (shortcode functions are way beyond my capability)
Dalton Rooney
Member
Posted 1 year ago #

Hi Pam,
I just pushed Portfolio Slideshow 1.0 live, with support for transition style, transition speed, and nowrap attributes all in the shortcode. And a few more little surprises. Hope that helps with your project!

Dalton
physalis
Member
Posted 1 year ago #

Hey Dalton,

any updates on when you'll be working your magic to make numbered navigation as proposed by me a feature of your truly great plugin? Or did I miss out on anything and you already incorporated it?

Have a great weekend ;)

Eno
Dalton Rooney
Member
Posted 1 year ago #

Hey Eno,
That was one of the features that made it into the paid version of the plugin, we just launched a few weeks ago: http://madebyraygun.com/lab/portfolio-slideshow.

The reason I'm not backporting it into the free version is that the HTML structure had to change a bit to support the several different pager styles (including a few still in the works) and it would have required quite a bit of work. So the free version probably won't get too many new features from here on out but should continue to work OK for most people, and any new/fancy features go into the paid version.

Cheers,
Dalton
physalis
Member
Posted 1 year ago #

Ah, too bad, I didn't recon with it. I see you moved the code on the free version a bit, so I would need to use my limited JS powers to incorporate it again - or go for the paid route....

Thanks for letting me know!