Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

CSS rollover gallery

Posted on 2014-12-27
8
102 Views
Last Modified: 2014-12-28
Hi all,

I am looking for a pure CSS rollover gallery, like the one in this link.
http://m5designstudio.com/2010/css/simple-css-gallery-image-text-rollover/
but functions like css/javascript one in this link http://jsfiddle.net/SRNBn/.

The functionality difference between the two is that http://jsfiddle.net/SRNBn/ has  initial default image (Behemot_detail_1.jpg) which is the first image in the list of images, but http://m5designstudio.com/2010/css/simple-css-gallery-image-text-rollover/ does not have one.

Any help is greatly appreciated.

Thanks in advance.

Ilyas
0
Comment
Question by:muvend
  • 4
  • 4
8 Comments
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40520269
Why don't use the jsfiddle one? What is the problem? You jut have to change some color and the thumnails' position...
0
 

Author Comment

by:muvend
ID: 40520364
It does not do anything. I have imported the JavaScript library and placed all the code (css, javaScript, HTML) in a html file it just shows the images but does not do anything when you hover the mouse over it.
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40520366
Have you linked jquery? Before the javascript you have to put this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Open in new window

and the jacascript code you found in jsfiddle must been wrapped this way:

$( document ).ready( function ()
{
    $('#imgDetail li img').on('mouseenter', function(){
        $('#bigImg').hide().attr('src',$(this).attr('src')).fadeIn('slow');
    });
});

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:muvend
ID: 40520382
Yes I have. I have tried the google one and other jQuery, also different versions. It just does not do anything.
0
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 40520385
Just tested this:
<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<style type="text/css">
			/*<![CDATA[*/
				.thumb { width: 75px; height: 75px; }
				li { display: inline; margin-right: 10px; }
			/*]]>*/
		</style>
	</head>

	<body>
		<div id="imgDetail">
				<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="bigImg" />
				<ul>
					<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="thumb" /></li>
					<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg"  class="thumb" /></li>
					<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="thumb" /></li>
				</ul>
		</div>
  	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
		<script type="text/javascript">
			$( document ).ready( function ()
			{
					$('#imgDetail li img').on('mouseenter', function(){
							$('#bigImg').attr('src',$(this).attr('src'));
					});
			});
		</script>
	
	</body>
</html>

Open in new window

It works fine if Iaccess it through localhost and if I just double click on the file...
0
 

Author Comment

by:muvend
ID: 40520391
Thank you very much.
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40520393
Glad to help you :-)
Cheers... and Happy New year!
0
 

Author Comment

by:muvend
ID: 40520414
Thank you. Happy New Year.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question