Weebly image zoom and 360 spin

Weebly logoAdding zoom and 360 spins to Weebly is easy with Sirv.

Gone are the days of uploading and configuring JavaScript, CSS and image files.

Simply upload your images to Sirv, then copy and paste the code.

Sirv loads external JavaScript in Weebly, so it works immediately. Try these demos on a Weebly Website, Weebly Blog and Weebly Store.

Add a 360 degree spin to your Weebly site

1. Login to Weebly > and pick a product page / web page where you want to add a 360 spin.

2. For a Weebly Store, go to Store > Products and select a product. Drag the Embed code icon into the Long Description box and a Custom HTML box will appear.

For Weebly Websites and Blogs, go to Pages and select page you want to work on. Drag the Embed code onto your page and a Custom HTML box will appear.

Weebly code embedding

3. Log in to your Sirv account. If you do not have a Sirv account, create an account here.

4. Upload your sequence of spin images to your Sirv account which you wish to use to create your 360 degree spin (see the ways to upload).

5. A spin will be generated in your Sirv account:

Generate a 360 degree spin

6. Get the HTML code for your new spin by right clicking spin, select ‘Embed‘:

Screenshot to embed 360 spin

7. Copy the spin code, starting with the JavaScript code in the top section: Click ‘Copy‘:

HTML code

8. Go to Weebly > Custom HTML box and paste the JavaScript code you copied from your Sirv account:

JavaScript code

9. Go back to your Sirv account > Go to the spin code in the bottom section > Click ‘Copy‘:

360 degree spin code

10. Go back to Weebly > Custom HTML box and paste the spin code you have copied from your Sirv account:

360 spin code for Weebly

11. Publish your Weebly Store/Website/Blog to see the 360 spin working. If you have a Weebly Store, the 360 spin will appear in the Long Description area.

View live demos of Sirv Spin on a Weebly Store, Weebly Website and Weebly Blog.

Add an image zoom to your Weebly Website or Blog

1. Log in to Weebly.

2. Go to Pages and select the page you want to work on. Drag the Embed code on to your page and a Custom HTML box will appear.

3. Log in to your Sirv account. If you do not have a Sirv account, please create an account here.

4. Upload the product image to your Sirv account.

5. Sirv has created HTML code for your new zoom. Right click image > Click ‘Embed‘:

6. Go to ‘Embed as‘ section > Select ‘Sirv Zoom‘ option:

7. Copy the new zoom code, starting with the JS code in the bottom section: Go to ‘The code‘ section > Click ‘Copy‘:

8. Go to Weebly > Custom HTML box and paste the JavaScript code you copied from your Sirv account:

9. Go back to your Sirv account and copy the first section of code (HTML div code):

10. Go back to the Weebly Custom HTML box and paste the zoom code from your Sirv account:

11. Publish your Weebly Website/Blog to see the zoom working.

Try our live demos of Sirv Zoom on a Weebly Website and Blog.

Adjust the width

Your spin or zoom will automatically fit the area where you paste it. If you’d like to fix the size, add ‘style‘ to the div class. The example below sets the width to 400px:

<div class="Sirv" data-effect="zoom" style="width: 400px"><img data-src="//sirv.sirv.com/Examples/test-air.jpg" /></div>