CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   jQuery Problems with my jQuery cycle and my portfolio (http://www.codingforums.com/showthread.php?t=284154)

bradchristopher 12-14-2012 06:58 PM

Problems with my jQuery cycle and my portfolio
 
Let me just start out by saying I am a novice when it comes to jquery and a lot of other topics being discussed in these forums. I apologize.

I am building a site on Wordpress right now with template that is just about perfect for my company's needs. The primary focus of the website is showcasing photographs. The template I am using allows you to build various portfolios with your photos and then choose between like 5 different templates when you are publishing your portfolio. One of these templates called "portfolio-template-button" is supposed to showcase one photo at a time with next and back buttons above the photo in the top left hand corner. This happens to be the only portfolio template I would really like to use and it also happens to be the one that is not responding correctly. The buttons don't work and all of the photos show up on the page at the same time extending down the page. You can see what I am talking about http://bceverything.com/portfolio/book-one/ If I look in my functions.php I can see this code referring to this type of gallery template
Code:

if ( $template == 'portfolio-next-button.php' ) {

                        wp_enqueue_script( 'functions-cycle', THEME_URI . '/js/functions.cycle.js', array('jquery'), 0.4 );

                        wp_enqueue_script( 'cycle', THEME_URI . '/js/jquery.cycle.min.js', array('jquery'), 0.4 );
                }

I am not sure if it has something to do with outdated scripts or what but here is a list of scripts I see being used:
Quote:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4" type="text/javascript">
<script src="http://bceverything.com/wp-content/themes/saveforweb/js/functions.cycle.js?ver=0.4" type="text/javascript">
<script src="http://bceverything.com/wp-content/themes/saveforweb/js/jquery.cycle.min.js?ver=0.4" type="text/javascript">
Like I said, I am pretty confused right now so in an attempt to be thorough, I am going to include the portion of portfolio.css referring to the template I am trying to use:

Quote:

/* Next/Back Button portfolio style
* @template portfolio-buttons
* @since 0.4.0
*/
.portfolio-template-button .hentry {
border-bottom: none;
}
.portfolio-template-button .portfolio-title {
display: none;
}
.portfolio-template-button .entry-content p {
margin: 0;
}
.portfolio-template-button .image-gallery-default{
width:850px;
height: 620px;
overflow-x: hidden;
overflow-y: hidden;
}
.portfolio-template-button .image {
width: 100%;
}
.portfolio-template-button .image img {
margin: 0 auto;
display: block;
}
.portfolio-template-button span.prev{
padding-right:4px;
}
.portfolio-template-button span.next {
padding-left:4px;
}
.portfolio-template-button span.info {
padding-left: 20px;
}
.portfolio-template-button span.prev:hover,
.portfolio-template-button span.prev:active,
.portfolio-template-button span.next:hover,
.portfolio-template-button span.next:active {
cursor: pointer;
text-decoration: underline;
}
.portfolio-template-button #footer {
margin-top: 5px;
}
I am not sure wether or not to include the coding for portfolio-next-button.php, gallery-default.php, or anything else. If anyone can help and they need more info, I am so grateful and definitely more than happy to provide whatever other you info you may need.

Another template choice on this theme is a portfolio-thumbnail-grid. I don't want to use this or any thumbnails at all but if you go to my example gallery 3, you can see what it is exactly I am trying to do. Once you click the thumbnail, it opens up into a one by one slideshow of sorts with a next and back button. When originally I decided to use this template, this is how the portfolio-next-button looked. I am not sure why it doesn't work anymore. It seems as though the thumbnail template uses colorbox and cycle. Here is a link to my example:http://bceverything.com/portfolio/book-3/
Thank you in advance for any help you can lend a novice. It is so greatly appreciated. I have been stuck on this for quite some time. It is the difference between my company and I getting our website up and not. Thanks!

SB65 12-15-2012 10:49 AM

It looks to me like this is a css issue rather than a js one. Your page is not throwing any js errors.

However, it would be css that displays one photo at a time, and in your 'book one' page there's no css that applies to any of the images. This is not the case in 'nook three' where some relevant css exists in portfolio.css. Neither does the validator throw any css errors, so it almost looks like your copy of portfolio.css is incomplete.

Is this possible?

bradchristopher 12-15-2012 11:22 PM

Well, I am real confused now. haha I appreciate your input SB65. I do know that the portfolio.css is complete. I never actually see any js errors or css errors either. I don't know if you noticed but my next and back buttons don't work either in my portfolio-next-button template 'book one'. That doesn't make much sense to me either. I don't remember if I mentioned that above. I suppose if it is confusing to why this isn't working properly I would just be open to the idea of how I could actually implement a template that worked like my portfolio-thumb-grid template without the thumbnail part. Thanks again SB65.

javageek 12-15-2012 11:57 PM

See if passing in the absolute path has any effect:
Code:

wp_enqueue_script( 'functions-cycle',  'http://bceverything.com/wp-content/themes/saveforweb/js/functions.cycle.js', array('jquery'), 0.4 );

                        wp_enqueue_script( 'cycle','http://bceverything.com/wp-content/themes/saveforweb/js/jquery.cycle.min.js', array('jquery'), 0.4 );


SB65 12-16-2012 10:55 AM

Well, I've just tried uploading that theme to a test site. The 'thumbnail grid' option works, and the horizontal and vertical scroll ones work after a fashion, but the next/back option does not. I think this is what you're seeing as well.

Although the theme home page purports to have a link to a demo page, it doesn't go anywhere....

The js is minified so very difficult to identify anything from that.

The version of jQuery included with the theme is a couple of years old which makes me think this theme is moribund...

I think your options are either to contact the theme developer for assistance, or just use a different theme/gallery. There are numerous plugins available for displaying galleries which might serve you better.

SB65 12-16-2012 11:27 AM

Ha!

Got it. There is indeed an error in the saveforweb theme. If you're interested, the body tag on the portfolio page with the next/back buttons has a class (among other things) of portfolio-template-next-button. However the css and the js reference a class of portfolio-template-button, without the 'next'. This error means that both the necessary css is not applied and that the cycle plugin is not set up on the images. So that's the problem.

You could change all the css and js, but I think the easier approach is as follows:

Rename the file wp-content/themes/saveforweb/portfolio-next-button.php to portfolio-button.php. You need to ensure that only the renamed file is on your server.

Edit the theme's functions.php file. Change this (line 169):

Code:

if ( $template == 'portfolio-next-button.php' ) {
to this:

Code:

if ( $template == 'portfolio-button.php' ) {
and then all should be OK.

Note to theme tester: must do better....:rolleyes:

bradchristopher 12-17-2012 05:39 AM

Thank you so much for your responses! Javageek I tried doing what you said it everything stayed the same. I appreciate your help. SB65, I cannot believe you figured that out or maybe that I miss it. It explained a lot. It seems to have almost fixed my problems. It looks like it is loading the gallery the way I would like, but the buttons still don't seem to be working. The 'book 1' page has some crazy lines in it now but I haven't had a second to have a look. 'Book 2' gallery is pretty similar. It is definitely a lot closer. I don't understand the deal with the buttons.

Definitely think the theme tester could have done a better job! haha It was actually pretty random how I came across this theme. It isn't supported. I think it is pretty much yesterdays news but it is really great for my purposes and I never find that. I don't think it has been updated or anything in at least a year. That is why I really want to learn all about what is going on so I can advance it as time goes by.

SB65 12-17-2012 08:50 AM

1 Attachment(s)
The buttons work OK on your book-one page for me.

I think your css is still not right, and it's not the same as the one I used for the test site. That css has entries for .portfolio-button, not .portfolio-template-button. Make a copy, and then have a try with the attachment to this post.

bradchristopher 12-18-2012 02:56 AM

You are amazing! Thank you so much! I had changed that and I guess I didn't remember to upload the changes. I have been on the road and haven't had much access to my computer for the last couple days. I am so appreciative of your help. I have been trying to figure this all out for weeks now.


All times are GMT +1. The time now is 11:14 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.