I have this site I've been working on here: http://www.replyonline.co.uk/DirectionGroup/xmas/index.php
When you hover over the first photo at the top, a voting box appears. Now if you click on the photo it displays the 'By whom' name and 2 numbers (the vote results). Both the photo thumbnail and the enlarged lightbox share the same HTML content as each other.
What I don't understand is why the enlarged box doesn't display the HTML properly, just the 2 numbers from the voting element rather than the voting element itself.
If you look at the source, you can see down the page in the code is the javascript and I can't figure out what I need to change to the JS in order to make HTML display on the larger view?
Here is an example of what the markup is for each thumbnail you click:
<img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>By Tim Morgan <?php echo ThumbsUp::item('1')->template('thumbs_up_down') ?></span>
As you can see, there is the thumb source and the large source as well as the voting function.
It turns out you have to set HTML with the .html method - currently you're converting the whole to text and then setting text.
Secondly, it looks like .tmpl does not like HTML. If you also set the HTML the first time (when doing .tmpl), it should always work.
It may help to clone() the forms so they exist on the previews.
Related
a href= "javascript :;" class="filter" data-filter="" works fine, but it does not work with responsive meanmenu by meanthemes, can someone please help, thanks in advance.
I tried the option in meanmenu not to remove the class attributes but it failed.
Sorry, but I can't find the begining of something that would start to make any sense in your question.
It seems to be very specific to a particular context. You could perhaps succintly describe that context ...
... and specifically what you are trying to achieve.
Some hints, though :
<a href="javascript:§some code here§;" §other relevant attributes§>;" ...>
is generally not a good idea :
The HTML Anchor Element () defines a hyperlink to a location on the same page or any other page on the Web.
The element that is intended to react to a click by executing JS code is the
<button>
Second best would be a
<div>
or at last resort a
<span>
if you really need your action to be in-line, which would be a bit unorthodox from a UX point of view.
At any rate : give your clickable element an id attribute, then, in a distinct and separate .js file, define what it does like so :
document.getElementById('thatId').addEventListener('click', function(e){
/*
* Your code goes here.
* The event argument e holds all what you need to know about
* what was clicked.
*/
});
In the "Related" side bar, I see this very relevant thread. Read it seriously.
I am creating a webpage with a hyperlinks menu bar on the top of the page. When I click a link in the menu bar I am calling a javascript that will display portfolio item images in the body of the page. Means when I click web design it shows images tagged under web design. When I click mobile it displays images pertaining to mobile. I already have it working from a template that I downloaded. But when I am using the mobile responsive menu bar called meanmenu the javascript does not work. The mobile responsive menu only opens links to Web pages. I hope you are perceiving my problem now...thanks
I've been messing around with a ton of different attempts none of which have proved even remotely successful. If someone is willing to, would you either walk me through or point me in the right direction.
I'm using http://sorgalla.com/projects/jcarousel/ Jcarousel as the image carousel on the top of the page with 3 images up at a time.
I'm looking for something like this following link http://tamarackcellars.com/ but where the content at the bottom of the page changes instead of the whole page loading to a new page when you click on one of the wines.
Any help would be greatly appreciated.
ok I am assuming you can get the carousel plugin to work, if not let me know.
If I understand you right, you want the content of the page to change but not to redirect. If this is static content then what you want is relatively simple and can be solved many ways.
First set up your carousel and give each image or content the same class like class="carouselObj". Then create a container on the same page that will hold different information with respect to each element of the carousel.
<div id="container">
<div class="info">1st image info</div>
<div class="info">2nd image info</div>
<div class="info">3rd image info</div>
<div class="info">4th image info</div>
</div>
Now to add some jquery to make it functional.The idea here is that when one of the images changes via click or from a timed event, the corrosponing information in the container will also change. Here is some code to give you the idea.
$('.carouselObj').click(function(){
var index = $('.carouselObj').index(this); // gets the index of carousell image clicked
$('.info').eq(index).show().siblings('.info').hide(); // shows the corrosponding element and hides the others.
});
Now in the css file you need to make sure you originally set the first info class
I'm having a problem with the Facebook Like Button here. Although the button works, it's fetching the wrong thumbnail to display on Facebook.
Since the website is a store and each product has its own like button, it's very important that the correct thumbnail is displayed on Facebook. I used the Facebook Linter to debug a product URL from the site. I hoped Facebook would grab the bigger, obviously main image of a product URL but it's fetching one of the related products thumbnail.
From what I've read in the docs, I should explicitly set og:image in the head of my document. However, I have no access to the back-end and I can only use JavaScript to dynamically generate a meta-tag. I've tried to do that but it seems worthless doing so since the URL is scrapped before any script is run.
I don't understand what rules Facebook is using to infer the value of og:image. On another website that also doesn't have any meta-tags set, the main image of the product is being correctly scrapped. Why?
When, for whatever reason, one cannot declare any Open Graph properties, what can be done to improve the chances of Facebook's algorithm grabbing the desired image (or text)?
Ideally, you should set og:image meta tags as part of the open graph protocol. When this fails, it simply defaults to all images via image html tags take into precedence. The very first image defined via img tag will be the first image pulled by facebook.
<html><body>
<p style="background:url(img0.jpg);">hello</p>
<img src="img1.jpg">
<img src="img2.jpg">
<p>bye</p>
<img src="img3.jpg">
</body></html>
If the above sample code was your site, facebook would label img1, img2 and img3 as potential thumbnails and in that order if the user has the option to choose what image to specify.
So, just put your product picture first.
SHORT VERSION
Can anyone offer me a JS image viewer which supports mechanism of passing image array on construction?
LONGER VERSION
I'm using Colorbox to view some images on a page.
The situation I desire is:
I add an image to viewer from <a> tag on a thumbnail (using class name, for example)
I add more images passing image hrefs to viewer object (thumbnails of these images aren't shown)
When I click on my first (and only) thumbnail, a viewer opens with big version of thumbnail PLUS added images via viewer object.
The situation I got:
- I put empty <a> tags (which I also make invisible in CSS) pointing to additional images I want to add (which don't have thumbnails).
Can anyone offer me a JS image viewer which supports such mechanism of passing image array on construction?
You're almost there.
In Colorbox, you create groups of things using the rel option. For example:
$('.thumbnail').colorbox({rel: 'colorboxImg'})
The above code means that when you click something with a class of thumbnail, the image viewer will open up and load all of the items that have a class of colorboxImg.
So, the "situation you got" (as you put it) is pretty close. Add a bunch of your hidden <a> tags and make sure the hrefs point to the right images. Give those <a> tags a class of colorboxImg (or whatever you decide to name your group) and you're done. Keep in mind that the .thumbnail also needs to have a class of colorboxImg.
Let me know if you have any other cases you need to satisfy and we can edit this answer.
I'd like to create a (preferably) HTML code that would load content from another, small page into the current website. The content of the small page is to be a set of anchors with images that change dynamically (thus encoding them into the page where they are to be displayed would not be practical). Is such a functionality achievable in pure HTML, or do I need to use javascript? Can someone provide a sample code of how it would look like?
Put this in your first HTML page
<iframe src="small-page.html" />
This creates a box on your first HTML page containing the contents of your second page.
You can control the height, width as well as other styles on the IFRAME.