Solved

CSS rollover gallery

Posted on 2014-12-27
8
100 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
 

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ICACL switch help. How to include current folder 2 36
Enter key on html form page 11 47
P tag not forcing line space 2 22
css icomoons will not display on page 14 14
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now