Log in

View Full Version : CMotion Gallery II help


riadh
07-16-2010, 08:47 PM
i have used this script (http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm)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 (http://www.getscore.net/category/spain/%D8%A7%D9%84%D9%83%D8%B1%D8%A9-%D8%A7%D9%84%D8%A5%D8%B3%D8%A8%D8%A7%D9%86%D9%8A%D8%A9).
http://img210.imageshack.us/img210/9881/70904393.jpg

Please can some body help with this script or give me the method used in the site..
thank you
riadh
07-17-2010, 06:44 PM
any suggestions please
azoomer
07-19-2010, 10:51 AM
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.

<!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.
azoomer
07-19-2010, 04:50 PM
Hi Riadh, I have made some styling and some hover effect to try to mach the template.
You can see it HERE (http://azoomer.com/Riadh/)
It's to big to upload so you can grab it from the link.

Here's how the html looks like now

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