Solved

CSS rollover gallery

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

813 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

12 Experts available now in Live!

Get 1:1 Help Now