Question

I am trying to create a gallery through a plugin I am making but am getting a javascript error and cant figure out why. Below is my code any help would be greatly appreciated. Here is where I have implemented it. http://findlegalanswers.com/?page_id=4

<?php
/*
Plugin Name: iPad and iPhone Swipe Gallery
Version: 1.0
Plugin URI: http://www.prototypesyndicate.com
Description: Adds a great simple looking gallery to your pages or post with iPhone and iPad swipe. For more information on how to setup view documentation in plugin folder
Author: Alex Gonzalez - Vinas
Author URI: http://www.prototypesyndicate.com
*/


    function jquery_load_gallery_header() {
        echo "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js\" type=\"text/javascript\"></script>" . "\n";
        echo "<script src=" . get_bloginfo('wpurl') . "/wp-content/plugins/iPad_iPhone_Gallery/js/jquery.touch-gallery-1.0.0.js\"></script>" . "\n";
    }

    function simpleslide_load_ready()
    {
        echo "<style type=\"text/css\">

        #content {
            padding: 50px 0 0 0;
            width: 600px;
        }
        #gallery {
            width: 300px;
            overflow: hidden;
        }
        #gallery div,
        #gallery a {
            display: block;
            float: left;
            color: #fff;
            width: 75px;
            height: 75px;
            margin: 0 8px 8px 0;
        }

            </style>";
    }

add_action('wp_head', 'jquery_load_gallery_header');
add_action('wp_head', 'simpleslide_load_ready');


//album [album category="flickr_url"] [/album]
function mAlbum( $atts, $content = null ) {

   extract( shortcode_atts( array(
      'flickr' => 'Featured',
      ), $atts ) );

    ob_start();
    ?>

    <div id="content">
        <div id="gallery">
        </div>
    </div>

    <script>
        $(function() {
            $.getJSON("http://api.flickr.com/services/rest?method=flickr.photosets.getPhotos&api_key=ed144a125aca366df3438c58c0c0ec9d&photoset_id=72157624601158052&extras=url_sq,url_m,url_o,&format=json&jsoncallback=?", function(data) {
                $.each(data.photoset.photo, function(i) {
                    $('<div>').append($('<img>').attr('src', this.url_sq)).data('flickr', this).appendTo('#gallery');
                });
                $('#gallery div').touchGallery({
                    getSource: function() {
                        var f = $(this).data('flickr');
                        return f.url_o || f.url_sq.replace('_s.', '_b.');
                    }
                });
            });

        });
    </script>


<?php   

    $content = ob_get_contents();
    ob_end_clean();
    return $content;

}

// Adds shortcode to use in pages or post. 
add_shortcode('album', 'mAlbum');


?>

Answer 1

I blame a polluted ‘wpurl’ return. Guessing that there is a space at the end in your blog title setting which got urlencoded into a bizarre destination. Thus, web browser looked for:

http://blabla%20/wp-content/…

At any rate, browser is thrown off that way. Check your blog title, trim the spaces or otherwise hardcode (for better or worse) the entire URL as needed.

Culprit line:

echo "<script src=" . get_bloginfo('wpurl') . "/wp-content/plugins/iPad_iPhone_Gallery/js/jquery.touch-gallery-1.0.0.js\"></script>" . "\n";