25382

Expand/shrink image in a div with JQuery

Question:

I'm using some images as banners on my site. They're full (960px) width and I initially show a portion of the image as a teaser (say 160px high). I do this now by using a separate image which is a slice of the full size image (which is 600px high). Complicating this are shadows that I apply in Photoshop at the top and bottom of the image that make it look "inset" into the div.

What I would like to do is overlay the image with a small icon that says something like "see more". When the visitor clicks on this icon I'd like to div to expand (acordian style) to show the whole image and then change the icon to "see less". When the new icon is clicked I'd like the image to collapse to its original size.

I suspect that I will need to use a new image (960 x 600px) that I've also added shadows to so I can retail the inset look. So, this requires two images, one that is swapped out when the div is expanding and contracting and one that is swapped in when the div contracts to the original 160px height.

Complicating this is the fact that the image acts as a banner near the top of the page and I don't want the div to expand upwards past the window top so as to disappear off-screen and possibly add a scrollbar. A final complication is that the small "slice" can be taken at any height in the original 600px image. I select an area of the image that looks best at 160px. So, the div expansion is not constant in height. If the slice is cut from the top of the original image, the div will only expand a bit at the top and much more at the bottom. Similarly with slices cut from the bottom of the original image.

I realize this is a complicated question, and I did Google around quite a bit looking for solutions. I found a couple of JQuery extensions (UI and Tools) that look like they might be usable, but I could find no examples of what I'm trying to do. If the answer is too complicated to attempt in this forum, pointers to sites that do what I'm trying to accomplish would be appreciated.

Answer1:

I threw some jQuery code together and came up with this:

<a href="http://www.ulmanen.fi/stuff/thumb/index.html" rel="nofollow">http://www.ulmanen.fi/stuff/thumb/index.html</a>

Is this what you were looking for? If it is, feel free to copy it for your own purposes. It works as a jQuery plugin, so just copy the plugin code from <a href="http://www.ulmanen.fi/stuff/thumb/thumb.js" rel="nofollow">here</a>. Here's how to use it:

HTML:

<a class="slidethumb" href="960_x_600_image.jpg" rel="MARGIN"><img src="960_x_160_image.jpg" /></a>

jQuery:

$(function() { $('a.slidethumb').slideThumb(); });

The rel attribute houses the cut position (margin) of the cropped image. If you cropped the image so that it the cropped region starts 300px from the top, put -300 here. If the crop was from top of the image, put 0 here and so on. It defaults to -220, which is (600 - 160) / 2.

Hope this helps.

Recommend

  • Excel VBA with multiple search criteria and loop until all distinct results are found
  • Pushing a path along a pair of paths originating from its endpoints
  • WCF Server Error. The content type text/html of the response message does not match the content type
  • Creating a custom exception class and custom handler class in Laravel 5.3
  • Will the app get rejected if you write image to /private/var/mobile/Media/DCIM/100APPLE/ directly?
  • percent (%) width rendered differently in different browser (firefox, safari, opera, chrome)
  • When will it become active on admob at Android app
  • Second Last records
  • Why does \\0 print different output in different system in java
  • Read certain key from certain section of ini file (sed/awk ?)
  • Android SearchView requires two clicks to expand the view
  • Exit from a loop that contains time delay immediately after a key is pressed
  • Renewing Cookie-session for express.js
  • chrome devtools inconsistency array length
  • Check thread status while leaving it in a waitable state
  • How to restrict number of concurrent processes?
  • Strings appear exact, but they do not match?
  • IE readonly textarea problem
  • Getting EOFError along with exceptions when using ftplib
  • Can't zip RDDs with unequal numbers of partitions
  • Is an if-let or a normal if condition better?
  • ASPNetCore MVC Routing Let Server Handle Specific Route
  • Telegram bot API - Inline bot getting Error 400 while trying to answer inline query
  • Which open source license has no forking [closed]
  • How can I replace the server in Web Component Tester
  • xcode don't localize specific strings
  • C# program and C++ DLL compiled for 32-bit system crash on 64-bit system
  • D3 get axis values on zoom event
  • How integrated is Collada to OpenGL ES
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • ilmerge with a PFX file
  • What is the “return” in scheme?
  • How to set/get protobuf's extension field in Go?
  • How to show dropdown in excel using jrxml (jasper api)?
  • Display Images one by one with next and previous functionality
  • Web-crawler for facebook in python
  • A cron job substitute?
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Running Map reduces the dimensions of the matrices
  • How to get NHibernate ISession to cache entity not retrieved by primary key