[Skip to main content](#vessel-content)

#   Displaying images using Ajax and Javascript

##

- **[rdpaul](/forum/user/36291-rdpaul "View rdpaul's Profile")**
- [![rdpaul's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/36291-rdpaul "View rdpaul's Profile") Topic Author
- [ Offline](/forum/user/36291-rdpaul)

Less More

- Posts: 15
- Thank you received: 0
-
-

11 years 2 weeks ago [\#216592](#216592) by [rdpaul](/forum/user/36291-rdpaul "View rdpaul's Profile")  *[Displaying images using Ajax and Javascript](/forum/32-content-creation/879724-displaying-images-using-ajax-and-javascript#216592 "-- HikaShop version -- : 2.2.2 -- Joomla version -- : 3.3.6 -- PHP version -- : 5.4.37  Hi,  I am implementing a Quick View feature on my site. On my Product Listing page there is a Quick View icon on each listed product, clicking which opens a lightbox which displays a custom layout showing thumbnails of all product images along with some more product information and an Add to Cart button.  To start with the full sized image corresponding to the first thumbnail will be shown when the lightbox opens and then as the user clicks on another thumbnail the corresponding image should be retrieved from the server using Ajax.  I have managed to add the Quick View button to each product on the Product Listing page and a click is now opening a lightbox which loads in a custom layout file which right now is a copy of the show&#95;default.php.  I would now like to modify the show&#95;default.php copy and implement the layout that I outlined above.  Can you please help with the JQuery / Javascript and Ajax urls required to implement the loading of images.  I would also like that the lightbox (implemented using Squeezebox) should close when the user adds a product to the cart by clicking the Add to Cart button in the lightbox. I plan to add a click handler to the Add to Cart button to close the Squeezebox but do I need to take care in some way that the product actually gets added to the cart before the Squeezebox is closed by me?  Thanks again in advance for all your help.")* was created by *[rdpaul](/forum/user/36291-rdpaul "View rdpaul's Profile")*

-- HikaShop version -- : 2.2.2
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.4.37

Hi,

I am implementing a Quick View feature on my site. On my Product Listing page there is a Quick View icon on each listed product, clicking which opens a lightbox which displays a custom layout showing thumbnails of all product images along with some more product information and an Add to Cart button.

To start with the full sized image corresponding to the first thumbnail will be shown when the lightbox opens and then as the user clicks on another thumbnail the corresponding image should be retrieved from the server using Ajax.

I have managed to add the Quick View button to each product on the Product Listing page and a click is now opening a lightbox which loads in a custom layout file which right now is a copy of the show_default.php.

I would now like to modify the show_default.php copy and implement the layout that I outlined above.

Can you please help with the JQuery / Javascript and Ajax urls required to implement the loading of images.

I would also like that the lightbox (implemented using Squeezebox) should close when the user adds a product to the cart by clicking the Add to Cart button in the lightbox. I plan to add a click handler to the Add to Cart button to close the Squeezebox but do I need to take care in some way that the product actually gets added to the cart before the Squeezebox is closed by me?

Thanks again in advance for all your help.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMyLWNvbnRlbnQtY3JlYXRpb24vODc5NzI0LWRpc3BsYXlpbmctaW1hZ2VzLXVzaW5nLWFqYXgtYW5kLWphdmFzY3JpcHQ/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Jerome](/forum/user/80-jerome "View Jerome's Profile")**
- [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile")
- [ Offline](/forum/user/80-jerome)
- HikaShop core developer

Less More

- Posts: 26394
- Thank you received: 4078
-
- [](http://obsi.dev)
-

11 years 2 weeks ago [\#216802](#216802) by [Jerome](/forum/user/80-jerome "View Jerome's Profile")  Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Displaying images using Ajax and Javascript](/forum/32-content-creation/879724-displaying-images-using-ajax-and-javascript#216802 "-- HikaShop version -- : 2.2.2 -- Joomla version -- : 3.3.6 -- PHP version -- : 5.4.37  Hi,  I am implementing a Quick View feature on my site. On my Product Listing page there is a Quick View icon on each listed product, clicking which opens a lightbox which displays a custom layout showing thumbnails of all product images along with some more product information and an Add to Cart button.  To start with the full sized image corresponding to the first thumbnail will be shown when the lightbox opens and then as the user clicks on another thumbnail the corresponding image should be retrieved from the server using Ajax.  I have managed to add the Quick View button to each product on the Product Listing page and a click is now opening a lightbox which loads in a custom layout file which right now is a copy of the show&#95;default.php.  I would now like to modify the show&#95;default.php copy and implement the layout that I outlined above.  Can you please help with the JQuery / Javascript and Ajax urls required to implement the loading of images.  I would also like that the lightbox (implemented using Squeezebox) should close when the user adds a product to the cart by clicking the Add to Cart button in the lightbox. I plan to add a click handler to the Add to Cart button to close the Squeezebox but do I need to take care in some way that the product actually gets added to the cart before the Squeezebox is closed by me?  Thanks again in advance for all your help.")*

Hi,

Your current request is for high customization and that's not something that our support forum can provide.
More than that, your question is pretty vague and it is really hard to give you an advice.

All I can tell you is that you can have access to all images in a product page, so it's up to you to make the javascript to generate some kind of lightbox gallery.
"Squeezebox" is provided by Joomla itself and you can use a little javascript script to close the "current" popup.

With the new Cart/Checkout system in HikaShop 3 ; you would be easier for you to manage the "add to cart" because it could be done using ajax.
With the current version (or an old version like HikaShop 2.2.2) you should be able to use the "return url" with the add to cart ; to redirect the user to a specific page, which will just close the popup.

Regards,

---

Jerome - Obsidev.com
HikaMarket &amp; HikaSerial developer / HikaShop core dev team.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzMyLWNvbnRlbnQtY3JlYXRpb24vODc5NzI0LWRpc3BsYXlpbmctaW1hZ2VzLXVzaW5nLWFqYXgtYW5kLWphdmFzY3JpcHQ/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop- Install &amp; Update- Product &amp; Category Display- Content Creation- Sales and Orders- - Orders management- - Reports &amp; Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import &amp; Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel &amp; Slider- - Mass Actions- - Filters &amp; Search- - Discount &amp; Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.157 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)

[](#top)
