CSS Codes
CSS Layouts
Results 1 to 4 of 4

Thread: CMotion Gallery II help

  1. 07-16-2010, 08:47 PM #1
    riadh
    riadh is offline Junior Coders
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CMotion Gallery II help

    i have used this script for text diplay but the problem is that i couldn't make the css style that i like. I didn't find how to make the design for this script.

    i want it to look a little bit like in this site.


    Please can some body help with this script or give me the method used in the site..
    thank you
    Last edited by riadh; 07-17-2010 at 06:41 PM.
    Reply With Quote Reply With Quote
  2. 07-17-2010, 06:44 PM #2
    riadh
    riadh is offline Junior Coders
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    any suggestions please
    Last edited by riadh; 07-17-2010 at 08:23 PM.
    Reply With Quote Reply With Quote
  3. 07-19-2010, 10:51 AM #3
    azoomer
    azoomer is offline Senior Coders
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    The application you show us is made with flash and I can't help with that. But it should be possible to make something that looks a bit like it with the motiongallery2 script.
    Here is something to start with.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="gallerystyle2.css" />

<script type="text/javascript" src="motiongallery2.js">

/***********************************************
* CMotion Image Gallery II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at http://www.dynamicDrive.com/forums
***********************************************/

</script>
<style type="text/css">
<!--
.gallery_even {
	width:320px;
	height:22px;
	background-color: #FCEACD;
}
.gallery_odd {
	width:320px;
	height:22px;
	background-color: #FFFFFF;
}
-->
</style>
</head>

<body>

<div style="overflow:hidden;">
<div id="motioncontainer" style="width:320px; height:260px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">

<!--Gallery Contents below-->



<div class="gallery_even">some text</div>
<div class="gallery_odd">some more text</div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>
<div class="gallery_even"></div>
<div class="gallery_odd"></div>



<!--End Gallery Contents-->

</div>
</div>
</div>
</body>
</html>
    Later tonight I am going to try to make the hover fade effect. You can tell me if you have some special requirements for the app.
    Reply With Quote Reply With Quote
  4. 07-19-2010, 04:50 PM #4
    azoomer
    azoomer is offline Senior Coders
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi Riadh, I have made some styling and some hover effect to try to mach the template.
    You can see it HERE
    It's to big to upload so you can grab it from the link.

    Here's how the html looks like now
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<title>motiongallery widget</title>

<link rel="stylesheet" href="gallerystyle2.css" />

<style type="text/css">

#container {
	width:320px;
	height:270px;
	padding-top:20px;
	padding-left:12px;
	padding-right:12px;
	position:relative;
	overflow:hidden;
        margin-top:100px;
	margin-left:auto;
	margin-right: auto;
	background: url(backgroundiimage.png);
	background-repeat:no-repeat;
}
#motioncontainer{
	margin-top:44px;
	
}
.gallery_odd {
	color:#444444;
	width:306px;
	height:18px;
	background-color: #FCEACD;
	padding-left:8px;
	padding-right:8px;
	padding-top:2px;
}
.gallery_even {
	color:#444444;
	width:306px;
	height:18px;
	background-color: #FFFFFF;
	padding-left:8px;
	padding-right:8px;
	padding-top:2px;
}
.galhover {
       cursor: default;
       font-family:Georgia, "Times New Roman", Times, serif;
       font-size:11px;
       font-weight:bold;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="motiongallery2.js">

/***********************************************
* CMotion Image Gallery II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at http://www.dynamicDrive.com/forums
***********************************************/

</script>

<script type="text/javascript">
jQuery(document).ready(function($) {
   $('.gallery_odd').hover(function(){
		$(this).stop().animate({
				   backgroundColor:'#FFA909',
				   color:'#FFFFFF'
				   }, 200);										 
	 }, function() {
		 $(this).stop().animate({
					backgroundColor:'#FCEACD',
					color:'#444444'
					}, 200);		 
   });	
   
   $('.gallery_even').hover(function(){
		$(this).stop().animate({
					backgroundColor:'#FFA909',
					color:'#FFFFFF'
					}, 200);										 
	 }, function() {
		 $(this).stop().animate({
					backgroundColor:'#FFFFFF',
					color:'#444444'
					}, 200);		 
   });   								 
});
</script>

</head>

<body>

<div id="container">

<div id="motioncontainer" style="width:314px; height:165px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">

<!--Gallery Contents below-->

<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>
<div class="gallery_even"><span class="galhover">some text</span></div>
<div class="gallery_odd"><span class="galhover">some more text</span></div>

<!--End Gallery Contents-->

</div>
</div>
</div>
</body>
</html>
    Last edited by azoomer; 07-19-2010 at 06:19 PM.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules