I try do dynamic gallery with jCarousel and Ajax.
My thumbs are loading from '.txt' file.
I try do something like this: If click the thumb body background are change <--- this action for all thumbs but different backgrounds...
But if I try add dynamic url for differents files, it isin't work, If I change + url + for accurate path it work, all picture loaded this same picture from the path - it is understandable ....
below my code
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="200" height="75" alt="" border="0" class="newbg" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 2,
itemLoadCallback: mycarousel_itemLoadCallback
});
$('.newbg').live("click", function(){
$('body').css('background-image', 'url(' + url + ')');
});
});
anybody has an idea as change this code for correct effects...?
I add something like this:
$('.newbg').livequery("click", function(){
var url = $(this).attr("src").replace("_t", "");
var img = new Image();
img.onload = function() {
};
img.src = url;
$('body').css('background-image', 'url(' + url + ')');
});
And it's work correct, thank...
Question can be close...
Related
I have this panel made with yootheme builder. I would like the image to have the link as well as the button. https://www.diningsix.dk/panel-test/
I found this solution on another website but it doesn't seam to work:
<script>
jQuery(function(){
jQuery('.linkpanel .uk-card > .uk-card-body > .readmore').each( function(){
var readmore = jQuery(this);
var href = jQuery(readmore).attr('href');
var link = '';
jQuery(readmore).closest('.uk-card').find('.uk-card-media-top, .el-title, .el-content').wrap(link);
});
});
</script>
This seams to work..
jQuery('body').ready(function(){
jQuery('.uk-card').each(function(){
$card = jQuery(this)
var link = $card.find('.el-link').attr('href')
if(link){
$card.find('.el-image').wrap('<a href=' + link + '></a>')
}
})
})
I am using Metalsmith to generate a static site from a markdown file.
The people editing the markdown file will write: {{{link "docs/file.docs"}}} and they expect a link on the site with that file (relative link)
The helper is simple, I tested and it is working:
handlebars.registerHelper('link', function(path) {
var url = handlebars.escapeExpression(path);
return new handlebars.SafeString(
"<a href='" + url + "'>" + url + "</a>"
);
});
But how can I add this helper and use it in my metalsmith configuration?
Here is a summarised example.
index.md:
etc etc link to the page is {{{link "docs/file.doc"}}}
I want with a simple make the following part of the html to be created:
etc etc link to the page is <a href='docs/file.doc'>docs/file.doc</a>
I found the answer here: https://segment.com/blog/building-technical-documentation-with-metalsmith/
Here is my index.js config for Metalsmith:
var Metalsmith = require('metalsmith');
var markdown = require('metalsmith-markdown');
var permalinks = require('metalsmith-permalinks');
var handlebars = require('handlebars');
var inplace = require('metalsmith-in-place');
handlebars.registerHelper('link', function(path) {
var url = handlebars.escapeExpression(path);
return new handlebars.SafeString(
"<a href='" + url + "'>" + url + "</a>"
);
});
Metalsmith(__dirname)
.metadata({ title: "Static Site" })
.source('./src')
.destination('/var/www')
.use(inplace({ engine: 'handlebars', pattern: '**/*.md' }))
.use(markdown())
.build(function(err, files) {
if (err) { throw err; }
});
This is my code so far, It downloads a small 240px image. Can I get the full sized pic to create a lightbox?
<script>
jQuery(function(){
var apikey = 'xxxxx';
var userid = 'xxxx';
jQuery.getJSON('https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key='+apikey+'&user_id='+userid+'&format=json&jsoncallback=?',
function(data){
jQuery.each(data.photos.photo, function(i,item){
var purl = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
var pid = item.id;
var container = '<img src='+ purl+' />';
console.log(container);
jQuery(container).appendTo('#images');
});
});
});
</script>
Sure thing! You can use the API flickr.photos.getSizes to get a list of all the sizes available. Make one Ajax call to flickr.photos.getSizes, pick the largest one from that list, and then make your Ajax call for its URL (you won't have to stitch the URL together as you do in your original code).
I'm using the following to load posts into a index page of a wordpress site. The problem is when it gets to the last page and there are no more posts to load. Its just keeps reloading the last page.
Any ideas of how I might stop this from happening? Thanks.
var $content = '#content';
var $nav_wrap = '.navigation';
var $anchor = '.navigation a.next';
var $text = 'Load More';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');
$('#almc-load-more').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), '', function(data) {
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
$next_href = $($anchor, data).attr('href'); // Get the new href
$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll
$($nav_wrap).before($new_content); // Append the new content
$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('#almc-load-more').attr('href', $next_href); // Change the next URL
$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
});
});
Above code taken from here: http://kaspars.net/blog/wordpress/jquery-script-for-loading-more-posts
You could add some code to check if the new href is different than the current href, and then only try to add a new post if they're different. Then, if they aren't, you could have a message saying there are no more posts.
var lastLink;
$('#almc-load-more').click(function(e) {
if ( $anchor == $('.navigation a.next').last() ) {
lastLink = 1;
}
if (lastLink == 1) {return} else {
...
}
...
After the comment from Mr. Mayers (Thanks) I gave up on the code and used this tutorial:
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Has / does everything I needed.
I am working on contact page where the client can enter the postcode which will take them to google maps for directions to the company, the problem which i am having is although the hyperlink is set to target_blank but still the window opens on the back hand instead of opening in front of the website page. I have no idea why it opens on the back hand and focus is on the current page instead of moving it to google map page
<a href="#" target="_blank">
<img alt="" src="/images/contactUs/directionbtn.png" onclick="return openDirections(1);" /></a>
<script type="text/javascript">
function openDirections(NumVal) {
if (NumVal == 1) {
if (document.getElementById("<%=txtPostcode.ClientID%>").value == "") {
alert("PostCode can not be blank");
document.getElementById("<%=txtPostcode.ClientID%>").focus();
return false;
}
else {
var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/;
var tempURL = document.getElementById("<%=txtPostcode.ClientID%>").value;
if (regPostcode.test(tempURL) == false) {
alert("Please Enter a Valid PostCode");
document.getElementById("<%=txtPostcode.ClientID%>").focus();
return false;
}
else {
var url = 'http://maps.google.co.uk/maps?saddr={' + $('#<%=txtPostcode.ClientID%>').val() + '}&daddr=&daddr=646+Preston+Rd,+Clayton-le-Woods,+Chorley+PR6+7EH,+United+Kingdom&iwloc=1&dq=Tangent+Design';
document.location = url;
return true;
}
}
}
</script>
Try window.open(url); instead of of document.location = url;
All I see you doing is setting the url of the current window. Maybe try using something like this to open a new window instead.
window.open('url to open',)
in place of document.location = url
Each browser can be configured to handle how new pages are opened. Take a look at the preferences in the browser you are using, and see if that is the behavior that you currently have configured.
I think this is what you are looking for:
var x = window.open(URL, 'name', '...');
x.focus();