I am following the steps given here http://wordpressthemescollection.com/simple-modal-google-map-easy-modal-map-boxes-with-jquery-752.html to display a Google map in a lightbox like window in a WordPress site.
But the code doesn’t work. Checking Firebug gives an error “jQuery.modal() is not a function”
I have made sure that the jQuery and Simple Modal scripts are loaded and in the page where I want to display the map I include the jQuery code
<a href="http://maps.google.com.." class="map">Show map</a>
....//some more code
jQuery(document).ready(function () {
jQuery('.map').click(function (e) {
jQuery.modal('<iframe src="'+this.href+'&output=embed"></iframe><p class="larger"><a target="_blank" href="'+this.href+'">View larger</a></p>');
return false;
});
});
I have a sneaking suspicion that jQuery.modal(....
needs to be changed to jQuery('#someid').modal()
but not sure how to go about it.
Please can someone shed some light on whats going wrong here.
Many thanks
EDIT: As I mentioned I have already loaded the required scripts in the themes header.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/wp-content/themes/thename/js/jquery.simplemodal.1.4.1.min.js" type="text/javascript"></script>
Seems that the jQuery Simple Modal plugin is not properly installed. Have you included its js file in your document?
Marco