Please help me make my images expand on Yola

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi there,

Was trying to figure out out to create a larger pop up image from a thumbnail, and found some discussion on this site from a year ago around using script from Dynamic drive website to make it happen.
http://forum.yola.com/yola/topics/min...
UK Duke had given some instructions but when i went to do it, the script has been updated ( now V.2) and so I couldn't find the bit to 'make changes here'.

So kept looking and found this cool expando script/code that Id like to use, but have sat down and tried to figure it out-to no avail!. I have entered the code into my html widget on my Yola page, but cannot find where in it I need to enter the path info- for my file. Because I have never learnt to write or decipher code, my intuition fails me.

Was wondering if one of the Yola help team could please have a look at it and make some simple steps to go with it?
http://www.dynamicdrive.com/dynamicin...
They say 'its as simple as that', but I need to know the in between bits- where to enter file name etc..

Any help most appreciated

Cheers. Lisa
Photo of light gatherer

light gatherer

  • 2 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Lisa

I would be happy to assist you with this. However, before we proceed, can you please let me know if you have Yola Silver? As these codes require a .js file upload, this can only be achieved with Yola Silver as it is restricted with Yola Free.

Thank you for your patience as we work on this together.
Photo of light gatherer

light gatherer

  • 2 Posts
  • 0 Reply Likes
ok- no I don't at the moment, but I plan to do so once I have had a wee play with Yola free. Is there anyway the steps could still be explained please?- my colleague has a silver account and he wishes to know how to do it too.

Thanks Lisa
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Lisa

Please try following these instructions:

Step 1: In the HTML Widget, add this code:
<style type="text/css">

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

</style>

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

/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>

Where it says: <script type="text/javascript" src="expando.js">, you need to ensure the that file path is correct to your .js file (that you would have uploaded to your File Manager).

The path to your files would be:

http://www.yoursite.com/resources/fol...

Where:

"http://www.yoursite.com" is your site's address.
"resources" is the name of the File Manager (you must not change that).
"folder" - if your file is in a folder, include the folder name.
"file.jpg" is the name of your file.

Please ensure that the path name is identical to the one in the File Manager in terms of upper and lower-case letters, dots, dashes etc.

Step 2: Drag over another HTML Widget and paste in the following:

<p>
<img class="expando" border="0" src="amster2.jpg" width="100" height="75">
<img class="expando vacation" border="0" src="amster3.jpg" width="100" height="66">
<img class="expando" border="0" src="amster4.jpg" width="100" height="75">
</p>

<p>
<img class="expando cat" border="0" src="cat.png" width="200" height="88">
</p>

Again, you need to update the file path to the image files. Wherever you see src=" ", that is where you need to update your file path.

I hope this helps!

Please let me know if you have any further trouble with this.