search

chingu-voyages / v24-geckos-team-02

Books Plus | Voyage-24 | https://chingu.io/
GNU General Public License v3.0
1 stars 1 forks source link

Zoom thumbnail when hovered/clicked #54

Open Guitarhub786 opened 3 years ago

Guitarhub786 commented 3 years ago

User Story Description

As an end User; I want to be able to click on a thumbnail So I can get a better look at the book cover without losing the results queue and start all over again with a new search and scroll down for ages trying to find where I was in the search. I want to save time having to go to another page to "google more details" just to see what the book cover looks like.

This could be as simple as creating larger, readable thumbnail that could be zoom animated so it's readable without having to click to display more book details.

Example of dialog based image zoom: https://www.magictoolbox.com/magicthumb/examples/

Additional Considerations "hover" or "clicked": 3 Solutions; 1) Use 'click' if not used to leave the page to "google more details" 2) If 'click' is used then implement 'hover' over image instead. 3 ) Alternatively, create a dedicated "zoom" button.

ghost commented 3 years ago

I don't think this feature can be implemented using the Google Books API! I can't see that the API provides links to any images of sufficient resolution.

The image links are thumbnails only. I can't see that the Google Books site uses any high-res images either.

Here's what the non-small image looks like when scaled: Screenshot 2020-10-30 at 14 19 07

ghost commented 3 years ago

Thanks to @Guitarhub786 I found larger cover images for each book. However, the images won't load in the app, even if requested with the API key.

Screenshot 2020-11-04 at 11 20 49

They do load fine though if the URL is opened on its own in a browser window, or if the page is opened from file:///. So perhaps this is a request origin issue? I can't find mention of this in the API documentation. This issue suggests something changed with the Books API earlier this year. I've asked Google for help as below:

"I can open the URL of a larger (non-thumbnail) book cover image in my browser just fine, eg http://books.google.com/books/content?id=bHhlCrvbqSoC&printsec=frontcover&img=1&zoom=3&edge=curl&imgtk=AFLRE705scRP69p_ICWJXVCrxkxYoMkh0MKRC-XXTUYUjCkUDwoIL8lSB-cH0AdUzgy0Pe9rB7uhUDPKsVhTSEiqFD7LkXRWOvhqvPgx8KVAd58t0fRcWxs&source=gbs_api. But if I open a webpage that includes a <img src="[same URL]" />, served from eg localhost, only a blank image displays. Please can you explain how I can solve this problem?"

I've pushed the branch (feature/zoom-book-cover-image feature/book-cover-zoom) for reference.

Guitarhub786 commented 3 years ago

Great job.

"I've pushed the branch (feature/zoom-book-cover-image) for reference."

Could not find 'feature/zoom-book-cover-image' in local machine remote branches or on our repo. It was only when I came back here and tried clicking on it that it actually goes to branch;

'feature-book-cover-zoom'