?
Solved

CSS rollover gallery

Posted on 2014-12-27
8
Medium Priority
?
115 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
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 …
Suggested Courses
Course of the Month14 days, 11 hours left to enroll

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