2 Replies - 9669 Views - Last Post: 28 October 2011 - 07:26 PM

#1 Silvertongue62   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-October 11

trying to learn how to trigger text using jQuery Overlay.

Posted 26 October 2011 - 10:16 AM

I have just begun to play around with jQuery and have come to a stump in the middle of the road. For the last two days i have been trying to turn these links into a trigger for an overlay. So instead of having thumbnail images as the trigger, I am trying to figure out how to do the same with text. Everything that i have looked at online has had images as the trigger. I want to do the same with the text instead. Any and all positive feedback will be appreciated.

Code listed below. Thanks!

<!DOCTYPE html>

<html>



<head>
	<title>jQuery Triggering</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	


	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-apple.css"/>
	
	<style>
	
	/* black version of the overlay. simply uses a different background image */
	div.apple_overlay.black {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);		
		color:#fff;
	}
	
	div.apple_overlay h2 {
		margin:10px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
	}
	
	div.black h2 {
		color:#fff;
	}
	
	#triggers {
		margin-top:10px;
		text-align:center;
	}
	
	#triggers img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}
	</style>

	
	
	<!--[if lt IE 7]>
	<style> 
	div.apple_overlay {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
		color:#fff;
	}
	
	/* default close button positioned on upper right corner */
	div.apple_overlay div.close {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
	
	}	
	</style>
	<![endif]-->
</head>

<body>


<!-- trigger elements -->

<div id="triggers">
	<img src="http://static.flowplayer.org/tools/img/photos/gustavohouse.jpg" rel="#photo1"/>
	<img src="http://static.flowplayer.org/tools/img/photos/alexanderplatz-station.jpg" rel="#photo2"/>
	
</div>
<div>
						<ul>
							<li class="oe_heading">Animals</li>
							<li><a href="#">Monkeys</a></li>
							<li><a href="#">Bears</a></li>
							<li><a href="#">Cats</a></li>
							<li><a href="#">Dogs</a></li>
							<li><a href="#">Hippos</a></li>
							<li><a href="#">Giraffe</a></li>
						</ul>
						
					</div>


<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay black" id="photo1">
	<img src="http://static.flowplayer.org/tools/img/photos/gustavohouse-medium.jpg" />

	<div class="details">
		<h2>Berlin Gustavohouse</h2>

		<p>
			The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
			1998 by the Spanish artist Gustavo.
		</p>
	</div>
</div>

<div class="apple_overlay" id="photo2">
	<img src="http://static.flowplayer.org/tools/img/photos/alexanderplatz-station-medium.jpg" />

	<div class="details">
		<h2>Berlin Alexanderplatz Station</h2>

		<p>
			Berlin Alexanderplatz is a railway station in the Berlin city centre and is one
			of the city's most important interchange points for local public transport.
		</p>
	</div>
</div>


<!-- make all links with the 'rel' attribute open overlays -->
<script>


$(function() {
	$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>
</body>

</html>


Much appreciated

Silvertongue62

Is This A Good Question/Topic? 0
  • +

Replies To: trying to learn how to trigger text using jQuery Overlay.

#2 sas1ni69   User is offline

  • D.I.C Regular
  • member icon

Reputation: 86
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: trying to learn how to trigger text using jQuery Overlay.

Posted 28 October 2011 - 12:47 AM

Hey there, I just saw your mail. Sorry for the late reply. If I understand correctly, you want to click on a link and expand the image. If that is correct, then this tutorial will serve you well :)

Let me know if you have any issues with it. It's pretty straight forward but the approach is a little different. It's just as simple so don't worry about that.

Hope this helps.
Was This Post Helpful? 0
  • +
  • -

#3 Silvertongue62   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-October 11

Re: trying to learn how to trigger text using jQuery Overlay.

Posted 28 October 2011 - 07:26 PM

I appreciate you getting back to me sas1ni69. I must have mis-represented what i am trying to do.

I am trying to figure out how to click on text and make an overlay open on top of the page. I have read many of the tutorials as well as tried a few of the jquery overlays that I found no success with. On one script I experimented with, is an overlay drop down window that i was attempting to make the text links overlays. Thats what i was trying to work up to.. Once again i appreciate the fact that you replied at all. Once again i am trying to use text link in a script to do an overlay but somewhere along the way I continue to get an error where either the text link disappears off the page all together, or the jquery overlay drop down menu just stops working all together.

Thank you!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1