WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to get jquery script to run in php code (2 posts)

  1. locka
    Member
    Posted 2 years ago #

    Guys and girls struggling with this one. I wish to produce title that appear at the bottom of an image as you hover over it. I have managed to do a version using css script but as normal IE does not work to good. I've looked for plugins which a friend said there where loads that do this but I could not find any. so found some code on how to do it using java script & jquery as shown at the bottom. I'm also using nexgen gallery for the images and I'm modifying one of the gallery views which is php.

    I'm having trouble in getting the import parts of this code to work in php script.

    This I belive is not required as wordpress already has jquery loaded?
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

    These two I need to load in the header.

    <link rel="stylesheet" media="screen" type="text/css" href="ImageOverlay.css" />
    <script type="text/javascript" src="jquery.ImageOverlay.js"></script>

    It is this section here that I'm having issues with Not really sure how I call this in php page.

    <script type="text/javascript">
    // JavaScript for the Image Overlay galleries.
    $("#firstGallery").ImageOverlay();


    <html>
    <head>
    	<title>FerretArmy.com jQuery Image Overlay</title>
    	<link rel="stylesheet" media="screen" type="text/css" href="ImageOverlay.css" />
    </head>
    <body>
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    	<script type="text/javascript" src="jquery.ImageOverlay.js"></script>
    	<ul id="firstGallery" class="image-overlay">
    		<li>
    	 	<a href="http://www.ferretarmy.com">
    				<img alt="Palm Tree" src="testImages/palmtree.jpg"/>
    				<div class="caption">
    					<!--Write a Title Here-->
    					<p>Put a Caption Here</p>
    				</div>
    			</a>
    		</li>
    	</ul>
    	<script type="text/javascript">
    		// JavaScript for the Image Overlay galleries.
    		$("#firstGallery").ImageOverlay();
    </script>
    </body>
    </html>
  2. locka
    Member
    Posted 1 year ago #

    issue fixed in other ways

Topic Closed

This topic has been closed to new replies.

About this Topic