/    Sign up×
Community /Pin to ProfileBookmark

Need help with Javascript code to open picture in new window

Ok, bear with me I’m not very well educated with Javascript and jquery is pretty new to me.

So, on my HTML5 home page I have a series of thumbnail images which already have a css code in place which I would like to keep (roll over hover effect).

Right off the bat I’m not even sure if the hover effect will work with the javascript I need.

Below is the image code I have in place to display the thumbnail and create the hover when the mouse is rolled over:

<td><a class=”thumbnail” href=”#thumb”><img src=”Images/ECommerceThumb.gif” width=”103″ height=”94″ alt=”” border=”0″><span><img src=”Images/ECommerceExpand.gif”/><br /></span></a>
</br><a href=”services.html”>Ecommerce</a>
</table>

What I’m so desperately needing is the javascript or jquery code for my clients to click on the thumbnail image and an image that is a different size (this is the HTML code for it: <img src=”Images/ECommerceLarge.gif” width=”760″ height=”871″ alt=”” border=”0″>) will open in a new window with a possible “close” button.

I managed to figure out the “new window” using a text link, however I fear future customers will not know to click on the link.

Any help with this will be very much appreciated.

Thank you!

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@WestWebSep 09.2012 — You should check out the JQuery Lightbox plugin. Is that pretty much what you're trying to do?

[URL]http://leandrovieira.com/projects/jquery/lightbox/[/URL]
Copy linkTweet thisAlerts:
@KittieKatauthorSep 10.2012 — Somewhat, the site you provided me is a heck of a lot nicer looking then my CSS hover coding. My biggest challenge..I'm not to sure what I'm looking at. I'm not good with Javascript. Right now, I'm just trying to find a simple way that when someone clicks on a thumbnail image not only will the hover effect take place, but the person is able to click on the thumbnail to view the image in a separate window.

In the meantime I'm going to attempt to figure out what you sent me, I'd like to add it to my site..just not to sure how. Most of it is self explanatory. As foolish as this will make me look, I'm currently stumped on this part:

<script type="text/javascript">

$(function() {

// Use this example, or...

$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel

// This, or...

$('#gallery a').lightBox(); // Select all links in object with gallery ID

// This, or...

$('a.lightbox').lightBox(); // Select all links with lightbox class

// This, or...

$('a').lightBox(); // Select all links in the page

// ... The possibility are many. Use your creative or choose one in the examples above

});

</script>

Any advice?

Thank you again for your assistance!
×

Success!

Help @KittieKat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...