Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts

    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:
    <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:

    /* 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!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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?

  • Users who have thanked SB65 for this post:

    bradchristopher (12-16-2012)

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    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 );
    Last edited by javageek; 12-16-2012 at 03:09 AM. Reason: mistake

  • Users who have thanked javageek for this post:

    bradchristopher (12-18-2012)

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.
    Last edited by SB65; 12-16-2012 at 11:59 AM.

  • Users who have thanked SB65 for this post:

    bradchristopher (12-18-2012)

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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....
    Last edited by SB65; 12-16-2012 at 12:33 PM.

  • Users who have thanked SB65 for this post:

    bradchristopher (12-18-2012)

  • #7
    New Coder
    Join Date
    Dec 2012
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.
    Attached Files Attached Files

  • Users who have thanked SB65 for this post:

    bradchristopher (12-18-2012)

  • #9
    New Coder
    Join Date
    Dec 2012
    Posts
    23
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •