Jump to content

Recommended Posts

3 minutes ago, hungryfrank said:

all the way at the end of product_info.php for now after closing bracket ?>

Yeah that works, only issue is the image goes out of the constraints of the gallery.

Share this post


Link to post
Share on other sites

Select the container to jquery an put the image inside

Share this post


Link to post
Share on other sites
13 minutes ago, PiLLaO said:

Select the container to jquery an put the image inside

I don't see a container

16 minutes ago, LeeFoster said:

Yeah that works, only issue is the image goes out of the constraints of the gallery.

I think it has to do with the size of the image. the product lime is in the same way to me


you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites
6 minutes ago, hungryfrank said:

I don't see a container

$('.pi-gallery') must to work

Share this post


Link to post
Share on other sites
Posted (edited)
2 minutes ago, PiLLaO said:

$('.pi-gallery') must to work

it covers the thumbnails.

of course  I can write a replacment for  pi_gallery

Edited by hungryfrank

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites
<script>
$(function() {
	var img_option = "<?php echo $_GET['products_id']; ?>";
    $("#input_1").change(function(){
		var selectedImage = $(this).find(':selected').val();
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src=images/"+ img_option + "_" + selectedImage + ".jpg>");
     
    });
});
</script>

This works to change the image to the products_id and the selected value, just needs restricting to the container.

Share this post


Link to post
Share on other sites

Nice to see you guys having a go, rather than just talking and more talking 👍

When you get it to a "happy" conclusion, I'll post what I coded yesterday (PROTO code, not really tested etc).


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites
2 minutes ago, burt said:

Nice to see you guys having a go, rather than just talking and more talking 👍

When you get it to a "happy" conclusion, I'll post what I coded yesterday (PROTO code, not really tested etc).

We're sat here struggling and you coded it yesterday!!😀

Share this post


Link to post
Share on other sites
1 minute ago, LeeFoster said:

We're sat here struggling and you coded it yesterday!!😀

<script>
$(function() {
    var img_option='images/sample/'+'lime-1'+'.jpg';
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src="+ img_option+">");
      $('a.lb:first img').css({'width' : '150px' , 'height' : '150px'});
    });
});
</script>

try this and change the size


you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites

You're not struggling.  You have workable code and you probably (hopefully) learned some javascript tricks.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites
5 minutes ago, burt said:

Nice to see you guys having a go, rather than just talking and more talking 👍

When you get it to a "happy" conclusion, I'll post what I coded yesterday (PROTO code, not really tested etc).

that is where the difference between a real coder and copy and paster like me😡


you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites
Just now, hungryfrank said:

<script>
$(function() {
    var img_option='images/sample/'+'lime-1'+'.jpg';
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src="+ img_option+">");
      $('a.lb:first img').css({'width' : '150px' , 'height' : '150px'});
    });
});
</script>

try this and change the size

The issue is we're losing the class and other src details. We change -

<img src="images/11_1.jpg" alt="Objective Marker Bases" title="Objective Marker Bases" width="4123" height="2276" class="img-fluid">

To

<img src="images/11_2.jpg">

 

Share this post


Link to post
Share on other sites
2 minutes ago, burt said:

You're not struggling.  You have workable code and you probably (hopefully) learned some javascript tricks.

Was just highlighting the difference between someone with experience like you and the copy and paste coders like us.

Share this post


Link to post
Share on other sites
<script>
$(function() {
    var img_option='images/sample/'+'lime-1'+'.jpg';
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src="+ img_option+">");
      $('a.lb:first img').css({'width' : '150px' , 'height' : '150px'});
        $('a.lb:first img').addClass( "img-fluid" );
    });
});
</script>

you can add the class also


you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites
Just now, hungryfrank said:

<script>
$(function() {
    var img_option='images/sample/'+'lime-1'+'.jpg';
    $("#input_1").change(function(){
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src="+ img_option+">");
      $('a.lb:first img').css({'width' : '150px' , 'height' : '150px'});
        $('a.lb:first img').addClass( "img-fluid" );
    });
});
</script>

you can add the class also

I just added the class, lol

<script>
$(function() {
	var img_option = "<?php echo $_GET['products_id']; ?>";
    $("#input_1").change(function(){
		var selectedImage = $(this).find(':selected').val();
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src=images/"+ img_option + "_" + selectedImage + ".jpg class='img-fluid'>");
     
    });
});
</script>

 

Share this post


Link to post
Share on other sites
3 minutes ago, hungryfrank said:

you have to put the script in a hook or module.

Yeah that's my preference but where to hook? Or do we need a new one?

Share this post


Link to post
Share on other sites
Posted (edited)

like jquerry.php

 

shop/sitewide/

and condition it for if php_self= product_info.php

or maybe

 you can make a pi module.  or header_tag module 

I think u can put it 

Edited by hungryfrank

you can cut up to 4 pages of your checkout by using my three add_ons

login create account in one page

Express checkout  

login pop up modal

Share this post


Link to post
Share on other sites

Hard coded.

20 minutes ago, LeeFoster said:

Is this hard coded or hooked?

Hook advice:  make a product_info hook utilising the injectBodyEnd listener.  


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites
25 minutes ago, burt said:

Hard coded.

Hook advice:  make a product_info hook utilising the injectBodyEnd listener.  

This is the hook I got to but it doesn't appear to work.

class hook_shop_siteWide_changeImage {
  var $site_end = null;
  var $safe_pages = ['product_info.php']; 

  function listen_injectSiteEnd() {
    $changeImageScript = <<<eod
<script>
$(function() {
	var img_option = "<?php echo $_GET['products_id']; ?>";
    $("#input_1").change(function(){
		var selectedImage = $(this).find(':selected').val();
        val = $("#input_1 option:selected").text();
        $("a.lb:first").html( "<img src=images/"+ img_option + "_" + selectedImage + ".jpg>");
		$('a.lb:first img').addClass( "img-fluid" );
     
    });
});
</script>
eod;

	if (in_array(basename($_SERVER['PHP_SELF']), $this->safe_pages)) {
      $this->site_end .= '<!-- changeImage hooked -->' . PHP_EOL;
      $this->site_end .= $changeImageScript . PHP_EOL;

      return $this->site_end;
	}
  }
  

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×