Not sure if anyone can assit me but I have a product view page and at the top I have the product name in a h1 tag.
Each product has a selection of images attached to it that have the labels as their colour, i.e back, ivory, burgandy etc etc.
I want the Product name to be displayed as follows:
Products Name | Colour
I have managed to get it to happen for the first (defualt) image.
So when you go to the product page the name is:
Albany | Black (exactly as i want it)
I now want when you click on the different colour options (which are images) for the product name to change to:
Albany | Ivory
Albany | Burgandy
Albany | Chocolate etc etc etc.
I have received a certain amount of help but now I am stuck.
I have been advised to change the script.js file fo the theme to inclide the following:
$('.more-views a').click(function(){
$('#label').text( $('img', this).attr('alt') ); });
The code I have surrounding my h1 tag is as follows:
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
<span id="label"><?php echo ' | ' ?><?php echo $_product->getData('image_label');?></span></h1>
</div>
If anyone has any idea how I can achieve this I would really appreciate it.
Thanks in advance.
The link to the page in question is here:
http://dansiop.com/yarwood/index.php/albany.html
You've got several Javascript libraries loaded into the page (including scriptaculous, prototype and jQuery). Seeing that you're not using jQuery.noConflict(), you're going to have to use jQuery instead of $ if you're set on using jQuery.
Also, you have jQuery 1.7+ loaded, so I'd suggest you handle this using a delegate.
// don't forget document ready
jQuery(function ($) {
// let's cache the label
var _label = $('#label');
$('.more-views').on('click', 'a img', function () {
_label.text($(this).attr('alt'));
});
});
As mentioned, you have to put in an alt attribute in your images for this to work. It doesn't make much sense to get the alt value and display that if there's nothing to begin with.
<img src="" alt="Blue" />
$('.more-views a').click(function(){
$('#label').text( $(this).find('img').attr('alt') );
});
Please see my comment before this answer.
Related
Actually I need a bit of Java Script, but I am definitely not good at it. So I would really need your help.
My problem is, that I would need a script, which saves me the url from an id to a variable and outputs the variable something like this: LINK.
Note, that the ID, where I would like to get the link from, is somewhere in the page and the script likely at the bottom.
EXAMPLE OF WHAT I MEAN:
<div id="http://www.example.com" name="url">
<p>Some content</p>
</div>
.
.
.
.
LINK
.
.
.
<script>
variable = getIdWhereNameIsURL;
....
</script>
Would really appreciate your help!
First of all, id="http://www.example.com" may seems odd, but it should be OK per the HTML 5 specs. It is also unusual to have a NAME attribute for a DIV element.
Second, it will be easier to specify another id for your LINK, perhaps something like <a id="link_id">LINK</a>.
Then, you can have the below in your script block
var theDIV = document.getElementsByTagName("div")[0];
// here assuming it is the first DIV, otherwise, loop through the elements
// document.getElementsByName("url")[0].id may not work
if (theDIV.name == "url") {
var theLink = document.getElementById("link_id");
theLink.href = theDIV.id;
}
Im attempting to create a mouseover event for pictures on a page to load a summary of that picture into a div container called "contentarea". I'm new into coding, so please forgive my inaptitude. The code is below, but im not sure its going to work. Basically, I have 5 pictures of dogs on a webpage, and I want the mouseover event over a picture of the dog to load information from a seperate page called "content.html." The content that is loaded should load from a that has the same ID as the ID of the picture that is cursor is currently hovering over. The content will then load into a div that is below all the pictures called "contentarea." All pictures belong to the class dog. I had tried to adapt someone else's code, but to no effect.
<script>
function(){
$(.dog).mouseover(function(e) {
var dogId = $(this).data('id');
$("contentarea").load("content.html
# " + dogId + " ");
});
</script>
You can actually load another html file using ajax, that is not a problem like zongweil said on his comment, because the content you are loading is not dynamic.
You need to add to specify that .dog is a string by using '. Additionally, please explain what you are trying to achieve using the # dogId. Are there anchors on the html file that you are loading? I don't think you will achieve the expected effect by adding the anchor to the loaded html. If you want to load the info of just one dog, then create several content.html file each with the proper id like content1.html, content2.html, etc and use this:
<script>
$('.dog').mouseover(function(e) {
var dogId = $(this).data('id');
$("#contentarea").load("content" + dogId + ".html");
});
</script>
or instead use a single HTML file with the proper ids:
<div id="dogcontent1">
TEXT TEXT TEXT
</div>
<div id="dogcontent2">
TEXT TEXT TEXT
</div>
and then on the script use this:
<script>
$('.dog').mouseover(function(e) {
var dogId = $(this).data('id');
$("#contentarea").load("content.html #dogcontent"+ dogId );
});
</script>
I've got the following HTML code, which essentially pertains to a post where I announce something in just a few lines, end it with "[...]", and add a "Read more" link-button at the bottom. When this button is clicked, additional content that's hidden will fadeIn as the button disappears, leaving visible the introductory text and the one that was hidden -- simple enough. Now, I've already written the code for this, but the complication comes when I try to also remove that "[...]" (from the post where the click button happened) that I included in the sneak peek. Here's the HTML:
<div class="entry">
<p>Welcome. Talk about something briefly and click below for more. [...]</p>
<div class="slide-content">
<p>Hidden content.</p>
</div>
<span id="revealer" class="button">Read more</span>
</div>
Classes "entry" and "button" belong to my CSS file, while "slide-content" belongs to my .js file to control the fadeIn effect. The ID "revealer" also belongs to the .js file for the same purpose. This HTML is wrapped in a div tag with a class of "box". This is the format that each post follows, exactly the same format with the same HTML elements -- every time an announcement needs to be made, it's just a matter of putting the content between the paragraph tags and publish. Here is where my problem comes in, since I can't find a way to remove the "[...]" only in the post where the button has been clicked. I tried doing the following but it resulted in the deletion of all "[...]" throughout multiple posts:
$('.entry p').each(function() {
var textReplace = $(this).text();
$(this).text(textReplace.replace('[...]', ''));
});
Summary:
I need to remove the "[...]" text only from the post where the user has clicked on (the "Read more" button). The idea is to have this removed while at the same time the hidden content fades in.
I've been able to accomplish the above but for all instances of "[...]". I need to sophisticate my selection by modifying my jQuery code or the HTML.
Option 3 is to get rid of this "[...]", but I would like to leave it there to let the user know she has more content to read, and I would like to have that "Read more" button in all posts for consistency.
~Thanks in advance!
First, you mention you have multiple of these. In that case, this:
<span id="revealer" class="button">Read more</span>
will not work. id attribute has to be unique per document, i.e. you can have at most one element with the specific id value.
If you make your HTML (for each of the blocks) like this:
<div class="entry">
<p>Welcome. Talk about something briefly and click below for more. [...]</p>
<div class="slide-content">
<p>Hidden content.</p>
</div>
<span class="revealer button">Read more</span>
</div>
and your JS like this:
function replace(fromp) {
var textReplace = fromp.text();
fromp.text(textReplace.replace('[...]', ''));
}
$('.revealer').click(function() {
var fromp = $(this).siblings().eq(0);
replace(fromp);
});
it will work properly. Working example:
http://jsfiddle.net/G4t7Q/
Hope this helps.
When you run your page initialization script, you could use jquery to select all of the posts and all of the remove buttons and link them up via their click event. I've created a JSFiddle example, but here's the jist of it:
var removers = $(".remover")
var posts = $(".post")
for (var i = 0; i < removers.length; i++) {
$(removers[i]).click( { post: posts[i] },
function(event) {
var textReplace = $(event.data.post).text()
$(event.data.post).text(textReplace.replace('[...]', ''))
}
)
}
This is a simplified example; it assumes the posts and buttons are sorted in the markup.
I am using a gallery script with thumbnails on the following post on my site
http://www.lookbookcookbook.com/2012/03/apple-cinnamon-pancakes.html
It works fine, but when you go to the main page (third post down), it stops working. Is it because I have another post with the same script that is interfering?
Any help would be much appreciated, thanks!
Your script uses ids to target the picture to show. Ids should be uniques, only one element can have any given Id.
Your two galleries' img are sharing same Ids : #pic-0, #pic-1, etc. So on click, only the first one found is shown, the img in the first gallery.
It should not be too hard to solve, but a lot of your code must be CMS-generated, so I must know what you can change to help more.
(that's the piece of code handling your gallery:)
function myshowImages(id) {
/* $(".mainPic").hide();
$("#pic-"+id).show();*/
$('.mainPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
edit after comments :
So, honnestly your code is a bit of mess, there would be lots of change to achieve something clean.
However, for your immediate needs, you should use two showImage functions :
function myshowImages1(id) {
$('.mainPic1').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
function myshowImages2(id) {
$('.mainPic2').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
And edit your links :
for the first gallery.
for the second one.
Keep in mind that it's ugly and not scalable : if you have three gallery, it'll break.
I'm going to look at your code to see how you could do to have a unique function.
Edit2 :
So, a cleaner function for you to use :
1/ setup : chose a classname for each link/img pair. Per exemple :
<a href="" class="image_1">
<img alt="" height="80" src="(some long path)/lookbookcookbooksaya267b.jpg" title="" width="80">
</a>
the thumb link and the image to show :
<a href="(some long path)/lookbookcookbooksaya267.jpg">
<img alt="" class="image_1" height="470" src="(some long path)/lookbookcookbooksaya267.jpg"></a>
Then, I've seen you have JQuery, so this kind of function :
$(document).ready(function()
{
$(".gallery div div a").on("click",function()
{
var myClass = $(this).attr('class');
var $parentGallery = $(this).parents('.gallery');
$parentGallery.find("div > a > img").css("display","none").find("myClass").fadeIn();
return false;
});
});
First, it binds a click event on all your links which are two div depth in the .gallery element. That's your thumbs.
On click, it fetches the class of the clicked thumb link.
Then it searches for the parent .gallery of this link, hide alls images and show the good one.
I can't really guarantee it'll work out the box because your markup is very complex, but it should.
I am using Galleria for a slideshow. I want to place a small, 'Larger' link beside the stage.
I have this code for the 'Larger' button:
this.fullres = this.create('div', 'fullres');
this.get('fullres').innerHTML = 'Larger';
this.appendChild('fullres', this.fullres);
I have this code that assigns every <img>'s rel= tag to the full sized image URL from the page's custom field:
<img ... rel="<?=$attachments[$i]['fullres']?>" />
With JQuery, I am hoping to pull the active image's rel= tag value and append the .fullres href tag. This is the code I have so far, but it doesn't work:
var title = $(.images).attr('rel'); // pulls the fullres url from the rel tag
$('.galleria-fullres').attr('href', ); //append the galleria fullres href with the rel info
Galleria doesn't really work like that. But what you can do, is to create a button to enter fullscreen and have a larger image in fullscreen.
Something like this:
$('#galleria').galleria({
// other galleria options here
dataConfig: function( img ) {
// get the fullscreen image
return {
big: $( img ).attr('rel')
};
}
});
var galleria = Galleria.get(0);
$('#fullscreen-button').click(function() {
galleria.enterFullscreen();
});
I have to say I can't see how this would work as it is...
Do you know you have a typo at: $(.images)? Should be $('.images').
And have you left out the second parameter at $('.galleria-fullres').attr('href', ); on purpose? Shouldn't this be $('.galleria-fullres').attr('href', title); ?
How can the jquery work by referencing the elements by classes? You are getting an array of elements, not just one. I guess this is only an excerpt of your code? Am I missing something?
Could you perhaps post the html of a sample of these elements as seen in the browser? It should be a pretty easy thing, but I really can't see the whole picture with those lines only.