Cmotion Image Gallery I and II

**artistinspired** · 08-16-2015, 08:55 PM

1) Script Title: Cmotion image gallery I and II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm

and I'm sharing another one, because it has the option I want but I want the option IN cmotion.

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem: In Cmotion I am unable to figure out how to enable a title so that my thumbnail title will show under the larger image. The option is in the second script that I posted a link too, but I love cmotion, have worked with it for several years now but I am at a point where I really need to be able to have a simple way to add text for picture description under the enlarged image.

I appreciate any help you can give as I am truly stuck on this.

**artistinspired** · 08-17-2015, 06:44 PM

Honestly, if anyone just has a somewhat simple way to add captions to the enlarged images that would be amazing.(not directly edited into the images) I'm at this point looking at having to do entire new galleries for the entire site to do what needs to be done. I've scoured the internet for hours upon hours trying to solve this.

**ddadmin** · 08-17-2015, 10:02 PM

You can add descriptions underneath each image by tweaking the CSS (gallerystyle.css) slightly. Inside the .css file, note the changes in red:

Code:

#motioncontainer {
/*margin:0 auto;  Uncomment this line if you wish to center the gallery on page */
width: 50%; /* Set to gallery width, in px or percentage */
height: 200px; /* Set to gallery height */
}

#motioncontainer ul{
margin: 0;
padding: 0;
list-style: none;
}

#motioncontainer li{
display: inline-block;
vertical-align: top;
}

Specifically, make sure #motioncontainer's height is large enough to accommodate both the image and text description that follows height wise. Then for #motioncontainer li, use the two styles shown in red below to properly accommodate text underneath it.

With those changes, in your markup, you can now add a text beneath the desired image, for example:

Code:

<ul>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg" title="dd"></a><br />This is some description.</li>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li>
<li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li>
</ul>

**artistinspired** · 08-17-2015, 11:59 PM

Thankyou for responding, I was beginning to think I was not asking the right way. Okay, doing what you do works great....for the thumbnail images....I need it for the enlarged images....but I noticed something earlier today...apparently over the years I have modified the crap out of cmotion so much it doesn't even look much like the one you guys have up now....so would it be prudent to ask my question with my code here???or perhaps go elsewhere....Ill start here, and if I need to do it somewhere else, please just advise me...I now have two issues...but they may be resolved with the same solution....

#1 I cannot for the life of me figure out how to fix my script to put captions under the enlarged images
#2 The enlarged images (perhaps because I have them in an iframe now, unsure for sure) do not even allow a hover feature, which I really need atm so I can add pin it buttons to images....

here is the page I have been working on (as you can see I have used both cmotions I and II to utilize the entire page completely) at some point I apparently used an array to make this work. I'm getting old, my memory is painful...but i'm still using the js files and css

www.renrose.com/merchandise.html

aaaaand here is the code...hope no one gets a headache...I understand it and I know some of it is sloppy. this is a project that started out small for my former employer and has slowly grown over the last several years.....I took out some of the images because it was too damn big to post

Code:

<html>
<head>
<meta name="description" content="Renaissance Rose Website" />
<meta name="keywords" content="HTML, CSS, XML, javascript" />

<link rel="stylesheet" type="text/css" href="css/drop.css" />
<link rel="stylesheet" type="text/css" href="css/renrose.css"/>
<link rel="stylesheet" type="text/css" href="css/gallerystyle.css" />
<link rel="stylesheet" href="css/gallerystyle2.css" />
<!-- Please call pinit.js only once per page -->

      
<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->

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


/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/

</script>
<script type="text/javascript">
//Set array of larger images
var dynimages=new Array()
dynimages[0]="images/merchandise/purses.jpg"
dynimages[1]="images/merchandise/fairy.jpg"
dynimages[2]="images/merchandise/tie-dye-clothing.jpg"
dynimages[3]="images/merchandise/bacon.jpg"
dynimages[4]="images/merchandise/viral-bracelets.jpg"
dynimages[5]="images/merchandise/marijuana.jpg"
dynimages[6]="images/merchandise/summer-hats.jpg"
dynimages[7]="images/merchandise/skirts.jpg"
dynimages[8]="images/merchandise/mugs.jpg"



for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}

function loadFrame(id, num){
document.getElementById(id).src=dynimages[num]
return false;
}

</script>
<title>Renaissance Rose Merchandise</title>
</head>


<!-- configurable script -->


<body id="middle">

<table id="pattern" align="center" width="100%" height="100%">
<tr>
<td>
<table id="second" align="center" width="100%" height="100%">
<tr>
<td>


<table id="border" align="center" width="100%" height="100%">
<tr>
<td>
<table id="border2" align="center" width="100%" height="100%">
<tr>
<td>


<table border="0" cellpadding="0" cellspacing="0" align="center" width="1075" bgcolor="black" >
</td>
</tr>
<tr>
<td>
<img src="images/merchandise/merchandisebanner.jpg">
</td>
</tr>
<tr width="805">
<td>

</td>
</tr>

<tr width="920" bgcolor="white" height="1">
<td>
</td>
</tr>
<tr>
<td>
<div style="height:25px;">
    <ul class="cssMenu">
        <li>
            <a href="index.html">Welcome</a>           
           
        </li>
        <li>
            <a href="merchandise.html">Merchandise</a>
            <ul>
                <li><a href="accessories.html">Accessories</a></li>
                <li><a href="clothing.html">Clothing</a></li>
                <li><a href="costumes.html">Costumes</a></li>
                 <li><a href="exercise.html">Exercise Wear</a></li>
                  <li><a href="gifts.html">Gifts</a></li>
                   <li><a href="hats.html">Hats</a></li>
                   <li><a href="jewelry.html">Jewelry</a></li>
	<li><a href="novelty.html">Novelty</a></li>
	<li><a href="partyhats.html">Party Hats</a></li>
<li><a href="weapons.html">Weapons</a></li>
	<li><a href="wigs.html">Wigs and Hair</a></li>
            </ul>
        </li>
        <li>
            <a href="specialorders.html">&nbsp;Masks&nbsp;</a>
        </li>
        
        <li><a href="rentals.html">Rentals</a>
        
         <ul>
                <li><a href="1920.html">1920s/Flapper</a></li>
                <li><a href="WWII.html">1940s/World War II</a></li>
                <li><a href="1950.html">1950s/Grease</a></li>
                 <li><a href="character.html">Characters</a></li>
                  <li><a href="edwardian.html">Edwardian</a></li>
                   <li><a href="holiday.html">Holidays</a></li>
                   <li><a href="pirate.html">Pirates/Wench</a></li>
	<li><a href="renaissance.html">Renaissance</a></li>
	<li><a href="victorian.html">Victorian/Gibson</a></li>
	<li><a href="western.html">Western/Pioneer</a></li>
            </ul>
        
        
<li><a href="staff.html">&nbsp;Staff&nbsp;</a></li>
<li><a href="customers.html">Customers</a></li>
<li><a href="specialevents.html">Special Events</a></li>
<li><a href="storeinfo.html">Store Info</a></li>
<li><a href="contacts.html">Contact Us</a></li>
<li><a href="outabout.html">Out and About</a></li>
        
        
        
    </ul>
    </div>









</p>		
 <a href="http://www.facebook.com/RenaissanceRose"target="_blank"><img src="images/facebook.jpg" border="0"></a>
	<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>    

	
<td>

<iframe id="loadarea" src="images/merchandise/purses.jpg" width="700" height="525" scrolling="none" frameborder="1" marginwidth="0" marginheight="0"></iframe>
</td>
<td id="description" width="" colspan="" border="1" align="center" bgcolor="black" height="" cellspacing="0">
<div style="overflow:hidden;">
<div id="motioncontainer2" style="width:115px; height:530px; overflow:hidden; position: relative;">
<div id="motiongallery2" style="position:absolute; left:0; top:0;">

<!--Gallery Contents below-->

<a href="#" onClick="return loadFrame('loadarea', 0);"><img src="images/merchandise/purses-thumb.jpg" alt="purses" title="Purses" border="1"><br/>Purses</a>
<a href="#" onClick="return loadFrame('loadarea', 1);"><img src="images/merchandise/fairy-thumb.jpg" alt="fairy" title="Fairy Figure" border="1"></a>
<a href="#" onClick="return loadFrame('loadarea', 2);"><img src="images/merchandise/tie-dye-clothing-thumb.jpg" alt="tie dye clothing" title="Tie Dye Clothing" border="1"></a>
<a href="#" onClick="return loadFrame('loadarea', 3);"><img src="images/merchandise/bacon-thumb.jpg" alt="bacon merchandise" title="Bacon Merchandise" border="1"></a>
<a href="#" onClick="return loadFrame('loadarea', 4);"><img src="images/merchandise/viral-bracelets-thumb.jpg" alt="viral bracelets" title="Viral Bracelets, Black Light Friendly" border="1"></a>
<a href="#" onClick="return loadFrame('loadarea', 5);"><img src="images/merchandise/marijuana-thumb.jpg" alt="marijuana merchandise, pot merchandise" title="Marijuana Merchandise" border="1"></a>





<!--End Gallery Contents-->

</div>
</div>
</div>
</tr>
<tr>
<td align="center">
	
	</td>

	<td id="description" colspan="2" border="1" align="center" bgcolor="black" height="40px" cellpadding="0">
	<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer">
<a href="#" onClick="return loadFrame('loadarea', 6);"><img src="images/merchandise/summer-hats-thumb.jpg" alt="summer hat, summer hats" title="Summer Hats" border="1"></a>
<a href="#" onClick="return loadFrame('loadarea', 7);"><img src="images/merchandise/skirts-thumb.jpg" alt="skirts, skirt" title="Skirts" border="1"></a>
<a href="#" onClick="return loadFrame('loadarea', 8);"><img src="images/merchandise/mugs-thumb.jpg" alt="mugs, mug" title=" Mugs" border="1"></a>


</div>
</div>
	</td>



</tr>
	</table>
	</table>
	</table>
 </table>
</table> 
</table>
</form>
<script type="text/javascript" async defer  data-pin-color="red" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
</body>

<!-- end of slide show HTML -->

</html>

help me obi wan kenobe, your my only hope

**artistinspired** · 08-18-2015, 12:17 AM

ALSO

if I HAVE to I will go through every single image and edit in a caption (like you will see on the first image of the site I posted) IF I can just get the enlarged image to be clickable/hoverable so that the damn pinterest button shows up.

**ddadmin** · 08-18-2015, 06:24 AM

Ok, try the below steps to enabling a description to be shown on the enlarged images (not the thumbnail). The solution doesn't include making the images pinterest-able though, as I'm not familiar with their API. That's something we can maybe tackle next.

First, following your dynimages array, define a new array to hold the corresponding descriptions:

Code:

dynimages[15]="images/merchandise/steampunk-display.jpg"
dynimages[16]="images/merchandise/costume-hats.jpg"
dynimages[17]="images/merchandise/peacock-feathers.jpg"
dynimages[18]="images/merchandise/swimsuit.jpg"

var dyndesc=new Array()
dyndesc[0]="Description 1"
dyndesc[1]="Description 2"
etc

Near the same area, replace the default loadFrame() function with this new version instead:

Code:

function loadFrame(id, num){
var loadarea = document.getElementById(id)
document.getElementById('loadimg').src=dynimages[num]
document.getElementById('loaddesc').innerHTML=dyndesc[num] || ""
return false;
}

Moving on, change the IFRAME tag on your page:

Code:

<iframe id="loadarea" src="images/merchandise/purses.jpg" width="700" height="525" scrolling="none" frameborder="1" marginwidth="0" marginheight="0"></iframe>

to the following instead:

Code:

<div id="loadarea" style="width:700px;min-height:525px"><img id="loadimg" src="test4_files/bow-ties_002.jpg" /><div id="loaddesc"></div></div>

That should do the trick in terms of displaying the desired description beneath each enlarged image.

**artistinspired** · 08-18-2015, 08:52 PM

MY FRIGGEN HERO!!!

I knew it was going to have to be another array and had to do with the load frame but I just couldn't make it happen!!!

seriously....and..it not only solved my description issue, as I thought, it made the pins show up!!! GREAT BIG HUGS AND KISSES FROM AN ABSOLUTE STRANGER!! lol