Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Attribute Images


Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
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.

Link to comment
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).

Link to comment
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!!😀

Link to comment
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

Link to comment
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

Link to comment
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">

 

Link to comment
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.

Link to comment
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

Link to comment
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>

 

Link to comment
Share on other sites

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

Link to comment
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;
	}
  }
  

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...