?
Solved

CSS rollover gallery

Posted on 2014-12-27
8
Medium Priority
?
106 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
[X]
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
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

752 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