ThemeShaper Forums » Thematic

[closed]

Content Slider broken by thematic

(19 posts)
  • Started 3 years ago by MatthewRuddy
  • Latest reply from MatthewRuddy
  • This topic is not resolved
  1. Hi, I am the creator of the Easing Slider plugin which is an image/content slider for Wordpress. A user of this plugin has contacted me informing me that the 'Thematic' theme is not working with the plugin. The slider preloader shows but the images never load. My first thought is that this would be a jQuery conflict of some sort so I removed the PHP function which loads the JS files of Thematic. This made the first image in the slider load but not the rest.

    I've never worked with the Thematic theme before and I am completely clueless as to what the problem may be. I would really appreciate someone with more knowledge of Thematic to help me out with this.

    You can see the site in question here; http://www.matthewruddy.com/plugins/. You can also see a working example with the default Twentyten theme; http://www.matthewruddy.com/plugins/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true.

    FYI, the plugin loads its own jQuery. It deregisters jQuery, then registers and enqueue's its own jQuery file. I've tried removing this but it makes no changes to the problem. I would appreciate any help anyone can give.

    Posted 3 years ago #
  2. I referenced this post as a quickie example of the common problem: http://forums.themeshaper.com/topic/superfish-conflicts-with-additional-jquery-added#post-3904

    I changed all your $'s to jQuery to get the plugin to work temporarily (lazily).

    <script type="text/javascript">
    jQuery(document).ready( function(){
    var buttons = { previous:jQuery('#lofslidecontent45 .lof-previous') ,
    next:jQuery('#lofslidecontent45 .lof-next') };
    $obj = jQuery('#lofslidecontent45')
    .lofJSidernews( { interval : <?php echo $interval; ?>,
    <?php if($transition=='slide') echo "easing : 'easeInOutExpo'";
    if($transition=='smooth') echo "easing : 'easeInOutQuad'";
    if($transition=='fade') echo "direction : 'opacity'";
    if($transition=='swipe') echo "easing : 'easeOutBack'";
    if($transition=='bounce') echo "easing : 'easeOutBounce'"; ?>,
    duration : <?php echo $transpeed; ?>,
    auto : true,
    maxItemDisplay : 10,
    startItem:<?php if($start=='1') echo '0';
    if($start=='2') echo '1';
    if($start=='3') echo '2';
    if($start=='4') echo '3';
    if($start=='5') echo '4';
    if($start=='6') echo '5';
    if($start=='7') echo '6';
    if($start=='8') echo '7';
    if($start=='9') echo '8';
    if($start=='10') echo '9'; ?>,
    navPosition     : 'horizontal', // horizontal
    navigatorHeight : 15,
    navigatorWidth  : 25,
    buttons : buttons,
    mainWidth:<?php echo $width; ?>} );
    });</script>
    <!-- End of Easing Slider -->

    As a side note, nice little plugin. One thing I noticed was, while it appears to be resizing my images ok, they're kinda coming out blurry, but timthumb resized images come out crisp. I didn't dig too hard into the source, whats doing your resizing?

    Also, If you could integrate something like get-the-image into your plugin, so that there's an option to automatically pull post images without having to use custom fields, it would be effing awesome. Still, this is a very cool toy.

    Posted 3 years ago #
  3. So your saying you got the plugin to work by changing the $'s to jQuery's?

    The images may be appearing blurred because your not inserting the 'full size'd image. Make sure the 'full size' radio button is checked before you click insert into post, rather than 'thumbnail', 'medium', etc. Let me know if this makes no difference and I'll investigate it.

    As for the get-the-image I do intend to one day implement it however its very difficult to work hard on a free plugin that generates no income.

    Posted 3 years ago #
  4. wprunner
    Member

    I see that the plugin is fairly fairly new:
    http://wordpress.org/extend/plugins/easing-slider/stats/

    How do you blame it to no income for a plugin that is 5 days old ?

    The income will come out of donations to of a steady valuable plugin, and those who are interested in your work would contact you as you already have a site for that.

    It is because of your plugins people would contact you and request for a quote.

    So, keep up the development.

    Posted 3 years ago #
  5. Your forgeting the two and a half weeks prior to that in which I spent writing the plugin and learning PHP. This my first ever Wordpress plugin and also the first ever PHP exercise. The first ever PHP code I wrote was three weeks ago, before then I had never attempted it. The only reason I learnt it was to write this plugin as I found that the other slider plugins out there just didn't cut it for me.

    At the moment I'm also working on a website for a client so it's difficult to find the time to make a major update to the plugin. That's all I'm saying. I'm not complaining about the no income (well as of yet anyway but I'm aware it has only been five days). :)

    Sorry if this was misunderstood.

    @tarpontech;

    Ok, I did as you did, and the slider now works <b>except</b> in Internet Explorer. Also, I can now see what you mean by the blurry images however I really don't know how to fix it. The slider's container's height and width are set in the plugin settings (via CSS). Whatever width you set it to is also applied to the images (via HTML) <b>but not</b> the height in order to keep the images proportions correct.

    Any ideas?

    Posted 3 years ago #
  6. hmm, sorry i'm not really a coder, just another glorified script kiddie when it comes to java and php. I just knew that the wp_enqueue_script issue regarding the "capture" of the
    dollar-sign causes no end to jquery plugin grief with wordpress, and I've resorted to this sort of hack to get plugins to play nicely with each other.

    There should be a plethora of discussion on the subject around the web to help you get it coded in a way to be more compatible with other jquery plugins.

    I can't speak to the IE issue, as I've never had this hack specifically cause IE to choke on a jquery plugin.

    As to the image resizing, you should look to integrate timthumb.php, or another opensource resizing script into the plugin. Shouldn't take much wrangling, that way you can get the images resized and cropped without having to hear people complain about ...well...all the stuff they complain about when they have to play with pictures.

    As a first project, this is pretty effing cool matt, you've got me a little inspired to try to get my php ass in gear.

    Posted 3 years ago #
  7. looks sweet in FF. that is your first plugin and you only just learned php a few weeks ago? that's awesome man.

    what about using google's jquery? i don't see much reason to use your own. WP even has it in its includes folder. but you said that the jquery source didn't have any effect anyway.

    not that i am a jquery pro either (in fact we weren't on speaking terms earlier), but this is what i usually do to enable using the $ shortcut in WP

    <script type="text/javascript">
    jQuery(document).ready(function($) {
    
    $('#stuff).do_stuff();
    
    });
    </script>

    also- you might try posting over at stackoverflow.com i've had some super geeky questions answered there.

    Posted 3 years ago #
  8. just came back to say that

    using :
    wp_enqueue_script('jquery', $scripturl.'jquery.js');

    (not sure this has any impact)

    and changing:

    $(document).ready( function(){

    to :

    jQuery(document).ready(function($) {

    gets your plugin working for me in both FF and IE8 on my local setup.

    i'm sure you have tons of things on your to-do list for this plugin (like add a resizer. now that i think about it i'm not sure timthumb will work since your plugin uses jquery and that is client-side while timthumb is server-side) but i noticed that you have quite a few options getting saved to the db. you might want to consider putting them all in an array à la:

    http://return-true.com/2010/01/using-ajax-in-your-wordpress-theme-admin/

    i do this for my theme options and it works well.

    Posted 3 years ago #
  9. Hi,

    Thanks for the idea about the resizing script. I will try this in the future. Also thanks helgatheviking for the ajax tutorial. I will also try this.

    As for the solution to this problem I am having; I've tried what you said but it's still not working for in IE (although I may be doing it uncorrectly. I don't fully understand). Could you link me to the files you have modified? So I can get a better look.

    Thanks for all the feedback and help so far.

    Posted 3 years ago #
  10. here is the file i modified:

    http://pastebin.com/k4JesW4J

    lines 44 and 81 are where i made my edits. i also tried inserting timthumb and found no joy. i 'think' that jquery can't manipulate a timthumb generated image. but there are plenty of jquery image effects out there, one must be able to resize for you.

    i don't know that it matters, but i don't think you have to register a script and then enqueue it. i believe you can combine the 2 into enqueue. if the script is not already being loaded, it will be registered and added automagically.

    the ajax is neat, but you can still save everything into 1 db entry w/o ajax. just to show you what i have as a fallback

    $my_shortname = 'childtheme';
    
    //if save
    
    	if ('save' == $_REQUEST['action']) {
    
    //get array of post data
    	$post = $_POST;
    
    //verify nonce
    if (! wp_verify_nonce($post['security'], 'child-options-save') ) die('Security check'); 
    
    //defines current state of options array
    	if(!is_array(get_option($my_shortname . '_options'))) {
    		$my_data = array();
    	} else {
    		$my_data = get_option($my_shortname . '_options');
    	}
    
    //compare posted data with current options and update the changes
    
    	unset($post['security'], $post['action'] , $post['save'] );
    
    	update_option($my_shortname . '_options', $post);
    
          header('Location: themes.php?page=' . basename(__FILE__) . '&saved=true' . $error);
          die;
    
    } //end save	
    
        else if ('reset' == $_REQUEST['action']) {
    
    	  delete_option($my_shortname . '_options');
    
          header('Location: themes.php?page=' . basename(__FILE__) . '&reset=true');
          die;
        }
    
    //Then in my form I use this as my save button and the 2 hidden inputs mentioned in the article i gave you
    
    <button id="form_submit" name="save" type="submit" value="save" class="button"/><?php _e('Save changes','thematic'); ?></button>
          <input type="hidden" name="action" value="save" />
          <input type="hidden" name="security" value="<?php echo wp_create_nonce('child-options-save'); ?>" />
    
    //then anywhere you need the data you recall it from the array
    
    $my_data = get_option($my_shortname . '_options') //you can actually just global $my_data in most functions so you don't have to keep accessing the db
    
    $sImg1 = $my_data['sImg1'] ;
    $sImg2 = $my_data['sImg2'] ;
    Posted 3 years ago #
  11. Thanks for the ajax tip. In a bit of a rush at the moment so I'll check it out later. Looks very interesting (and confusing). I'm only a novice, rememebr :P

    As for the changes to the file.. I've done as you have yet it is still not working for me in IE.. Have you tried this with an online version of Wordpress also rather than a local version? (by local you mean on your system only, yes?).

    Regards,
    Matthew.

    Posted 3 years ago #
  12. Hi Matthew,

    I believe the issue here is that Thematic uses jQuery ( for superfish navigation ) and allows for the use of other js libraries by calling jQuery.noConflict. Thematic has in effect told jQuery to relinquish control of $ and to use jQuery instead of $.

    This is why replacing $ with jQuery in your script makes your plugin work with Thematic.

    It could be a good idea for you to include jQuery.noConflict in your script to provide multi-js-library compatibility for your plugin.

    Here are some links that will better explain this:

    http://api.jquery.com/jQuery.noConflict/
    http://docs.jquery.com/Using_jQuery_with_Other_Libraries

    If you are still having issues with internet explorer it may be a persistent cache issue. Clear ie's cache and reload and hopefully that should resolve the cross-browser issue.

    Cheers-
    Gene

    Posted 3 years ago #
  13. Hi Gene,

    I will look into the jQuery no conflict rule. It did cross my mind but didn't have time to look into it today. I will tomorrow.

    As for the slider not working in IE8; I'm not sure if it is a caching issue (I've tried deleting cache, browsing history, cookies, etc). I tried it on one of my families old computers and it worked on Firefox but not on IE8 also. Could this be something to do with jQuery no conflict?

    Matthew.

    Posted 3 years ago #
  14. You didn't quite get it right on your test page.

    There are several way to do this. Here is what I would do. Call jQuery.noConflict and then only change $(document) in your script

    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready( function($){
    var buttons = { previous:$'#lofslidecontent45 .lof-previous') ,
    next:$('#lofslidecontent45 .lof-next') };
    $obj = $('#lofslidecontent45')
    .lofJSidernews( {

    ...omitting PHP variable code

    );
    });</script>

    citing from: http://docs.jquery.com/Using_jQuery_with_Other_Libraries#Overriding_the_.24-function

    Finally, if you don't want to define another alternative to the jQuery name (you really like to use $ and don't care about using another library's $ method), then there's still another solution for you. This is most frequently used in the case where you still want the benefits of really short jQuery code, but don't want to cause conflicts with other libraries.

    ...omitting code example from docs.jquery.com

    This is probably the ideal solution for most of your code, considering that there'll be less code that you'll have to change, in order to achieve complete compatibility.

    I suggest this method since you are not using multiple libraries but would probably desire to avoid conflicts with them since you are distributing your plugin. Hopefully that will clarify things better.

    -Gene

    Posted 3 years ago #
  15. Ok Gene, I think I understand better now.

    Can I still use the PHP code? Without the PHP variable codes the user is restricted from changing the sliders transition style, navigation icons and dimensions (width).

    Posted 3 years ago #
  16. Yes, you can still use the PHP for dynamically controlling the scripts in your plugin. My example was to demonstrate a jQuery.noConflict method. I omitted the PHP code for brevity's sake.

    I believe the ie8 display issue is related to parse errors in your plugin's stylesheet.

    Posted 3 years ago #
  17. Ok, So I've done as you have yet it still isn't working in IE8 (and I have tried deleting cache, etc & tried it on another computer). Tried replacing the slider.css file with the one you sent me and adding jQuery.noconflict(); to the top and changing the jQuery(document).ready(function($)).

    I really am clueless now. FYI, the slider also uses another javascript file (name script.js). Could this be what is causing the problems? Maybe something isn't coded correctly.

    I didn't create the actual slider btw (I know zero jQuery/Javascript). I just turned it into a Wordpress plugin.

    Posted 3 years ago #
  18. Matthew,

    I think this issue may be specific to your test site. It works for me with IE8.

    Posted 3 years ago #
  19. I've tried uploading a new Wordpress site and it still isn't working for me. Something must be incorrect on my behalf.

    Sent you an email about it. Would appreciate if you could just send me your modified files and I'll just use those rather than trying to figure my own out.

    Thanks again,
    Matthew.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.