photo “zoom”

I don’t have a solution for your first question, I would like to get it fixed for my site too. (https://www.sr19repairables.com) I did figure out how to add next/previous arrows to the photos so just follow the steps below.

Step 1: You’re gonna need an image of a “next” and “previous” button. You can find the ones I used here and here. Once you have your images, upload them to your media library. You’re going to need the link to each of them in just a little, so hold onto that tab.

Step 2: This part is a little harder, but if you follow closely, you’ll be fine. Head over to your admin dashboard for your website and find the Plugins tab. Click on the Plugin Editor submenu and on the top right of the page that appears, select the WP Car Manager plugin and hit the select button. In the Plugin Files box on the right, navigate to “assets” to “js” to “lib” and finally, select “jquery.prettyPhoto.min.js”. Your file will now be displayed in the main part of the page. Scroll down to line 51, where you’ll find this:
<a class="pp_next" href="#">next</a> \
Add a line and copy and paste this code:
<a class="pic_next" href="#"><img src="https://www.sr19repairables.com/wp-content/uploads/2019/10/Next-e1571253696457.png" alt="Next"></a> \
You’ll have to change the img src to the URL of the “next” image you uploaded earlier. Now repeat the actions: Add a line after this line:
<a class="pp_previous" href="#">previous</a> \
And copy and paste this code:
<a class="pic_previous" href="#"><img src="https://www.sr19repairables.com/wp-content/uploads/2019/10/Previous-e1571253837246.png" alt="Previous"></a> \
Make sure to replace the img src with the URL of your “previous” image. Here’s an example of what it should look like when you’re finished:

	<a class="pp_next" href="#">next</a> \
	<a class="pic_next" href="#"><img src="https://www.yoursite.com/next_image_url.png" alt="Next"></a> \
	<a class="pp_previous" href="#">previous</a> \
	<a class="pic_previous" href="#"><img src="https://www.yoursite.com/previous_image_url.png" alt="Previous"></a> \

Step 3: So now if you would update your file, you would see two images side by side in the top left-hand corner of your vehicle images when you tap on them. However, if you tapped on the images, it would not scroll to the next/previous image like it should. Notice the href="#" in each of the lines above. This is what makes the image scroll to the next image when you tap on it. However, the action for the two images you just added isn’t defined yet, so we’re gonna get busy and define it. So head down to line 841 where you’ll find this:

			$pp_pic_holder.find('.pp_previous, .pp_nav .pp_arrow_previous').bind('click',function(){
				$.prettyPhoto.changePage('previous');
				$.prettyPhoto.stopSlideshow();
				return false;
			});

			$pp_pic_holder.find('.pp_next, .pp_nav .pp_arrow_next').bind('click',function(){
				$.prettyPhoto.changePage('next');
				$.prettyPhoto.stopSlideshow();
				return false;
			});

This is what makes the image scroll to the next/previous photo when you tap on one side or the other. So all you have to do to get your added next/previous images to function correctly is add their class name in with the rest of the bunch. So since the classes for your next/previous images is pic_next and pic_previous respectively, add a comma after .pp_arrow_previous and add .pic_previous and a comma after .pp_arrow_next and add .pic_next. Here is what it should look like:

$pp_pic_holder.find('.pp_previous, .pp_nav .pp_arrow_previous, .pic_previous').bind('click',function(){
				$.prettyPhoto.changePage('previous');
				$.prettyPhoto.stopSlideshow();
				return false;
			});

			$pp_pic_holder.find('.pp_next, .pp_nav .pp_arrow_next, .pic_next').bind('click',function(){
				$.prettyPhoto.changePage('next');
				$.prettyPhoto.stopSlideshow();
				return false;
			});

Now go ahead and save your file and go to one of your listings and check it out.

Step 4: So, like I said, the images are side by side in the top left-hand corner of your photo when you tap on it. We’re gonna fix that with some simple CSS. On your car listing page, hit customize (in the admin header bar). Navigate to the Additional CSS tab and copy and paste this CSS into the provided field:

.pic_previous {
	position: absolute;
	top: 100%;
	left: 0%;
	transform: translate(-0%, -100%);
}

.pic_next {
	position: absolute;
	top: 100%;
	right: 0%;
	transform: translate(-0%, -100%);
}

Now when you tap on the photos, your next/previous images will be in the bottom two corners and when tapped on will scroll to the next/previous image in the list. You can check it out on my site here.

If this doesn’t work for any reason, just let me know!

• This reply was modified 5 years, 1 month ago by sr19r.

Update: Good news! I finally figured out how to get the zoom to work. If you look close, you’ll notice that if you tap at just the right spot in the top right-hand corner of a picture when you are viewing it up closer, it will expand and get much larger. So all you have to do to get it to work is add this (I used this image: zoom.png):

<a href="#" class="pp_zoom_in" title="Zoom"><img src="https://www.yoursite.com/your_image_url.png"></a> \

right after line 50 in your “jquery.prettyPhoto.min.js” file. Then you have to search your file (Ctrl+f) for “pp_expand” and replace every instance with “pp_zoom_in” and then “pp_contract” and replace every instance with “pp_zoom_out”. Be careful to leave any periods or other punctuations where they are. Also, don’t replace “allow_expand”; it’s got to stay the same. I also added an X button to close the whole picture holder. I’ll explain that in just a little. Save your file for now, and if you want to add the X, just save that tab.

So there should be a zoom image on your pictures and when you tap it, it should expand and you’ll be able to zoom in, out and around. I added a little CSS to bring it away from the edge:

.pp_zoom_in {
	position: absolute;
	left: 0%;
	top: 0%;
	padding-left: 15px;
}

.pp_zoom_out {
	position: absolute;
	left: 0%;
	top: 0%;
	padding-left: 15px;
}

Now for the X button:

Back in your .js file, right underneath the “pp_zoom_in” code you just added, insert this code:

<a class="pp_box_close" href="#">&times;</a> \

Obviously, this is going to need an action or event, so scroll down to line 839 and add two line after it. (Just to keep things a little separated) On the second line, paste this code:

$('a.pp_box_close').bind('click',function(){ $.prettyPhoto.close(); return false; });

That’s it for there. Hit the save button and you’ll now see a little X in the top left-hand corner of your picture holder. Add this CSS and see what it does!:

.pp_zoom_in {
	position: absolute;
	left: 0%;
	top: 0%;
	padding-left: 15px;
}

.pp_zoom_out {
	position: absolute;
	left: 0%;
	top: 0%;
	padding-left: 15px;
}

OK! Now you should see a larger X, and it will now be in the top right-hand corner of your picture holder. If you have any questions, just let me know! Also, check my results here.

Cheers!

—sr19r

• This reply was modified 5 years, 1 month ago by sr19r.

Hello,

Thank you for sharing that. I have created a ticket in GitHub and we will look into this soon.

Hi guys, any update on whether this might become an option in the plugin please?

Desperately seeking a solution for an image zoom as my customer needs his car buyers to be able to check for bumps and scratches on cars being sold.

Plus I guess most of us aren’t brave enough to attempt the “fix” mentioned above and risk breaking the plugin/site!

Please help!