Aller au contenu

Supprimer le hash (#) dans mes urls ou rajouter #!


MrMoche

Sujets conseillés

Bonjour,

J'ai un ptit problème avec mes urls, dans ma galerie d'images il y a un hash (#) dans mon url à chaque fois que je change d'image, normal vu que c'est de la navigation en AJAX, ça se présente comme ceci: -http://monsite.com/goodies#image.jpg et moi je souhaiterai une url comme: -http://monsite.com/goodies/image.jpg .

Au pire rajouter un point d'exclamation même si je ne suis pas fan comme j'ai vu ici: http://oseox.fr/blog/index.php/795-referencement-ajax . Ou encore l'url rewriting, mais je ne sais pas si ça marche avec la navigation en ajax.

Comme je sais qu'un simple hash (#) c'est pas super pour le référencement google je souhaiterai changer ceci si c'est possible, mais je ne sais pas comment procéder.

Voici mon code JS, surtout que je n'y connais rien en codage Java je préfère pas toucher:

/**
* Galleria
*
* Galleria is a javascript image gallery written in jQuery.
* It loads the images one by one from an unordered list and displays thumbnails when each image is loaded.
* It will create thumbnails for you if you choose so, scaled or unscaled,
* centered and cropped inside a fixed thumbnail box defined by CSS.
*
* The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence
* of obtrusive design elements. Use it as a foundation for your custom styled image gallery.
*
* MAJOR CHANGES v.FROM 0.9
* Galleria now features a useful history extension, enabling back button and bookmarking for each image.
* The main image is no longer stored inside each list item, instead it is placed inside a container
* onImage and onThumb functions lets you customize the behaviours of the images on the site
*
* Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9
*
* Version 1.0
* Februari 21, 2008
*
* Copyright (c) 2008 David Hellsing (http://monc.se)
* Licensed under the GPL licenses.
* http://www.gnu.org/licenses/gpl.txt
**/

(function($){

var $$;


/**
*
* _AT_desc Convert images from a simple html <ul> into a thumbnail gallery
* _AT_author David Hellsing
* _AT_version 1.0
*
* _AT_name Galleria
* _AT_type jQuery
*
* _AT_cat plugins/Media
*
* _AT_example $('ul.gallery').galleria({options});
* _AT_desc Create a a gallery from an unordered list of images with thumbnails
* _AT_options
* insert: (selector string) by default, Galleria will create a container div before your ul that holds the image.
* You can, however, specify a selector where the image will be placed instead (f.ex '#main_img')
* history: Boolean for setting the history object in action with enabled back button, bookmarking etc.
* onImage: (function) a function that gets fired when the image is displayed and brings the jQuery image object.
* You can use it to add click functionality and effects.
* f.ex onImage(image) { image.css('display','none').fadeIn(); } will fadeIn each image that is displayed
* onThumb: (function) a function that gets fired when the thumbnail is displayed and brings the jQuery thumb object.
* Works the same as onImage except it targets the thumbnail after it's loaded.
*
**/

$$ = $.fn.galleria = function($options) {

// check for basic CSS support
if (!$$.hasCSS()) { return false; }

// init the modified history object
$.historyInit($$.onPageLoad);

// set default options
var $defaults = {
insert : '.galleria_container',
history : true,
clickNext : true,
onImage : function(image,caption,thumb) {},
onThumb : function(thumb) {}
};


// extend the options
var $opts = $.extend($defaults, $options);

// bring the options to the galleria object
for (var i in $opts) {
if (i) {
$.galleria[i] = $opts[i];
}
}

// if no insert selector, create a new division and insert it before the ul
var _insert = ( $($opts.insert).is($opts.insert) ) ?
$($opts.insert) :
jQuery(document.createElement('div')).insertBefore(this);

// create a wrapping div for the image
var _div = $(document.createElement('div')).addClass('galleria_wrapper');

// create a caption span
var _span = $(document.createElement('span')).addClass('caption');

// inject the wrapper in in the insert selector
_insert.addClass('galleria_container').append(_div).append(_span);

//-------------

return this.each(function(){

// add the Galleria class
$(this).addClass('galleria');

// loop through list
$(this).children('li').each(function(i) {

// bring the scope
var _container = $(this);

// build element specific options
var _o = $.meta ? $.extend({}, $opts, _container.data()) : $opts;

// remove the clickNext if image is only child
_o.clickNext = $(this).is(':only-child') ? false : _o.clickNext;

// try to fetch an anchor
var _a = $(this).find('a').is('a') ? $(this).find('a') : false;

// reference the original image as a variable and hide it
var _img = $(this).children('img').css('display','none');

// extract the original source
var _src = _a ? _a.attr('href') : _img.attr('src');

// find a title
var _title = _a ? _a.attr('title') : _img.attr('title');

// create loader image
var _loader = new Image();

// check url and activate container if match
if (_o.history && (window.location.hash && window.location.hash.replace(/\#/,'') == _src)) {
_container.siblings('.active').removeClass('active');
_container.addClass('active');
}

// begin loader
$(_loader).load(function () {

// try to bring the alt
$(this).attr('alt',_img.attr('alt'));

//-----------------------------------------------------------------
// the image is loaded, let's create the thumbnail

var _thumb = _a ?
_a.find('img').addClass('thumb noscale').css('display','none') :
_img.clone(true).addClass('thumb').css('display','none');

if (_a) { _a.replaceWith(_thumb); }

if (!_thumb.hasClass('noscale')) { // scaled tumbnails!
var w = Math.ceil( _img.width() / _img.height() * _container.height() );
var h = Math.ceil( _img.height() / _img.width() * _container.width() );
if (w < h) {
_thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 });
} else {
_thumb.css({ width: 'auto', height: _container.height(), marginLeft: -(w-_container.width())/2 });
}
} else { // Center thumbnails.
// a tiny timer fixed the width/height
window.setTimeout(function() {
_thumb.css({
marginLeft: -( _thumb.width() - _container.width() )/2,
marginTop: -( _thumb.height() - _container.height() )/2
});
}, 1);
}

// add the rel attribute
_thumb.attr('rel',_src);

// add the title attribute
_thumb.attr('title',_title);

// add the click functionality to the _thumb
_thumb.click(function() {
$.galleria.activate(_src);
});

// hover classes for IE6
_thumb.hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); }
);
_container.hover(
function() { _container.addClass('hover'); },
function() { _container.removeClass('hover'); }
);

// prepend the thumbnail in the container
_container.prepend(_thumb);

// show the thumbnail
_thumb.css('display','block');

// call the onThumb function
_o.onThumb(jQuery(_thumb));

// check active class and activate image if match
if (_container.hasClass('active')) {
$.galleria.activate(_src);
//_span.text(_title);
}

//-----------------------------------------------------------------

// finally delete the original image
_img.remove();

}).error(function () {

// Error handling
_container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>');

}).attr('src', _src);
});
});
};

/**
*
* _AT_name NextSelector
*
* _AT_desc Returns the sibling sibling, or the first one
*
**/

$$.nextSelector = function(selector) {
return $(selector).is(':last-child') ?
$(selector).siblings(':first-child') :
$(selector).next();

};

/**
*
* _AT_name previousSelector
*
* _AT_desc Returns the previous sibling, or the last one
*
**/

$$.previousSelector = function(selector) {
return $(selector).is(':first-child') ?
$(selector).siblings(':last-child') :
$(selector).prev();

};

/**
*
* _AT_name hasCSS
*
* _AT_desc Checks for CSS support and returns a boolean value
*
**/

$$.hasCSS = function() {
$('body').append(
$(document.createElement('div')).attr('id','css_test').css({ width:'1px', height:'1px', display:'none' })
);
var _v = ($('#css_test').width() != 1) ? false : true;
$('#css_test').remove();
return _v;
};

/**
*
* _AT_name onPageLoad
*
* _AT_desc The function that displays the image and alters the active classes
*
* Note: This function gets called when:
* 1. after calling $.historyInit();
* 2. after calling $.historyLoad();
* 3. after pushing "Go Back" button of a browser
*
**/

$$.onPageLoad = function(_src) {

// get the wrapper
var _wrapper = $('.galleria_wrapper');

// get the thumb
var _thumb = $('.galleria img[rel="'+_src+'"]');

if (_src) {

// new hash location
if ($.galleria.history) {
window.location = window.location.href.replace(/\#.*/,'') + '#' + _src;
}

// alter the active classes
_thumb.parents('li').siblings('.active').removeClass('active');
_thumb.parents('li').addClass('active');

// define a new image
var _img = $(new Image()).attr('src',_src).addClass('replaced');

// empty the wrapper and insert the new image
_wrapper.empty().append(_img);

// insert the caption
_wrapper.siblings('.caption').html(_thumb.attr('title'));

// fire the onImage function to customize the loaded image's features
$.galleria.onImage(_img,_wrapper.siblings('.caption'),_thumb);

// add clickable image helper
if($.galleria.clickNext) {
_img.css('cursor','pointer').click(function() { $.galleria.next(); });
}

} else {

// clean up the container if none are active
_wrapper.siblings().andSelf().empty();

// remove active classes
$('.galleria li.active').removeClass('active');
}

// place the source in the galleria.current variable
$.galleria.current = _src;

};

/**
*
* _AT_name jQuery.galleria
*
* _AT_desc The global galleria object holds four constant variables and four public methods:
* $.galleria.history = a boolean for setting the history object in action with named URLs
* $.galleria.current = is the current source that's being viewed.
* $.galleria.clickNext = boolean helper for adding a clickable image that leads to the next one in line
* $.galleria.next() = displays the next image in line, returns to first image after the last.
* $.galleria.prev() = displays the previous image in line, returns to last image after the first.
* $.galleria.activate(_src) = displays an image from _src in the galleria container.
* $.galleria.onImage(image,caption) = gets fired when the image is displayed.
*
**/

$.extend({galleria : {
current : '',
onImage : function(){},
activate : function(_src) {
if ($.galleria.history) {
$.historyLoad(_src);
} else {
$$.onPageLoad(_src);
}
},
next : function() {
var _next = $($$.nextSelector($('.galleria img[rel="'+$.galleria.current+'"]').parents('li'))).find('img').attr('rel');
$.galleria.activate(_next);
},
prev : function() {
var _prev = $($$.previousSelector($('.galleria img[rel="'+$.galleria.current+'"]').parents('li'))).find('img').attr('rel');
$.galleria.activate(_prev);
}
}
});

})(jQuery);


/**
*
* History extension for jQuery
* Credits to http://www.mikage.to/
*
**/


/*
* jQuery history plugin
*
* Copyright (c) 2006 Taku Sano (Mikage Sawatari)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* Modified by Lincoln Cooper to add Safari support and only call the callback once during initialization
* for msie when no initial hash supplied.
*/


jQuery.extend({
historyCurrentHash: undefined,

historyCallback: undefined,

historyInit: function(callback){
jQuery.historyCallback = callback;
var current_hash = location.hash;

jQuery.historyCurrentHash = current_hash;
if(jQuery.browser.msie) {
// To stop the callback firing twice during initilization if no hash present
if (jQuery.historyCurrentHash === '') {
jQuery.historyCurrentHash = '#';
}

// add hidden iframe for IE
$("body").prepend('<iframe id="jQuery_history" style="display: none;"></iframe>');
var ihistory = $("#jQuery_history")[0];
var iframe = ihistory.contentWindow.document;
iframe.open();
iframe.close();
iframe.location.hash = current_hash;
}
else if ($.browser.safari) {
// etablish back/forward stacks
jQuery.historyBackStack = [];
jQuery.historyBackStack.length = history.length;
jQuery.historyForwardStack = [];

jQuery.isFirst = true;
}
jQuery.historyCallback(current_hash.replace(/^#/, ''));
setInterval(jQuery.historyCheck, 100);
},

historyAddHistory: function(hash) {
// This makes the looping function do something
jQuery.historyBackStack.push(hash);

jQuery.historyForwardStack.length = 0; // clear forwardStack (true click occured)
this.isFirst = true;
},

historyCheck: function(){
if(jQuery.browser.msie) {
// On IE, check for location.hash of iframe
var ihistory = $("#jQuery_history")[0];
var iframe = ihistory.contentDocument || ihistory.contentWindow.document;
var current_hash = iframe.location.hash;
if(current_hash != jQuery.historyCurrentHash) {

location.hash = current_hash;
jQuery.historyCurrentHash = current_hash;
jQuery.historyCallback(current_hash.replace(/^#/, ''));

}
} else if ($.browser.safari) {
if (!jQuery.dontCheck) {
var historyDelta = history.length - jQuery.historyBackStack.length;

if (historyDelta) { // back or forward button has been pushed
jQuery.isFirst = false;
var i;
if (historyDelta < 0) { // back button has been pushed
// move items to forward stack
for (i = 0; i < Math.abs(historyDelta); i++) {
jQuery.historyForwardStack.unshift(jQuery.historyBackStack.pop());
}
} else { // forward button has been pushed
// move items to back stack
for (i = 0; i < historyDelta; i++) {
jQuery.historyBackStack.push(jQuery.historyForwardStack.shift());
}
}
var cachedHash = jQuery.historyBackStack[jQuery.historyBackStack.length - 1];
if (cachedHash !== undefined) {
jQuery.historyCurrentHash = location.hash;
jQuery.historyCallback(cachedHash);
}
} else if (jQuery.historyBackStack[jQuery.historyBackStack.length - 1] === undefined && !jQuery.isFirst) {
// back button has been pushed to beginning and URL already pointed to hash (e.g. a bookmark)
// document.URL doesn't change in Safari
if (document.URL.indexOf('#') >= 0) {
jQuery.historyCallback(document.URL.split('#')[1]);
} else {
current_hash = location.hash;
jQuery.historyCallback('');
}
jQuery.isFirst = true;
}
}
} else {
// otherwise, check for location.hash
current_hash = location.hash;
if(current_hash != jQuery.historyCurrentHash) {
jQuery.historyCurrentHash = current_hash;
jQuery.historyCallback(current_hash.replace(/^#/, ''));
}
}
},
historyLoad: function(hash){
var newhash;

if (jQuery.browser.safari) {
newhash = hash;
}
else {
newhash = '#' + hash;
location.hash = newhash;
}
jQuery.historyCurrentHash = newhash;

if(jQuery.browser.msie) {
var ihistory = $("#jQuery_history")[0];
var iframe = ihistory.contentWindow.document;
iframe.open();
iframe.close();
iframe.location.hash = newhash;
jQuery.historyCallback(hash);
}
else if (jQuery.browser.safari) {
jQuery.dontCheck = true;
// Manually keep track of the history values for Safari
this.historyAddHistory(hash);

// Wait a while before allowing checking so that Safari has time to update the "history" object
// correctly (otherwise the check loop would detect a false change in hash).
var fn = function() {jQuery.dontCheck = false;};
window.setTimeout(fn, 200);
jQuery.historyCallback(hash);
// N.B. "location.hash=" must be the last line of code for Safari as execution stops afterwards.
// By explicitly using the "location.hash" command (instead of using a variable set to "location.hash") the
// URL in the browser and the "history" object are both updated correctly.
location.hash = newhash;
}
else {
jQuery.historyCallback(hash);
}
}
});

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Merci de nous donner l'url de ta galerie photos, car tout ceci me paraît très flou.

A priori, le # n'a aucun rapport avec Ajax. Le # signifie simplement une ancre, c'est à dire un point de repère interne à la page.

Lien vers le commentaire
Partager sur d’autres sites

Malheureusement, tu ne pourras pas te séparer du hash : c'est le seul moyen qu'il existe pour que l'url "change" (même si on reste techniquement sur la même page) quand tu effectues une opération JavaScript (Ajax ou non). Toute autre modification de l'url entraîne un changement de page, et donc Ajax perdrait beaucoup de son intérêt.

Par contre, as-tu réellement besoin que l'url de la page change ? Ce n'est en toute logique pas indispensable, à moins que tu ne veuilles qu'on puisse faire un lien vers une image précise.

L'ajout du hash dans l'url permet au JavaScript de réafficher l'image en question, ou au navigateur, si JS est désactivé, de pointer sur la bonne image si elles sont disposées en liste, les unes en-dessous des autres.

Lien vers le commentaire
Partager sur d’autres sites

Malheureusement, tu ne pourras pas te séparer du hash : c'est le seul moyen qu'il existe pour que l'url "change" (même si on reste techniquement sur la même page) quand tu effectues une opération JavaScript (Ajax ou non). Toute autre modification de l'url entraîne un changement de page, et donc Ajax perdrait beaucoup de son intérêt.

Par contre, as-tu réellement besoin que l'url de la page change ? Ce n'est en toute logique pas indispensable, à moins que tu ne veuilles qu'on puisse faire un lien vers une image précise.

L'ajout du hash dans l'url permet au JavaScript de réafficher l'image en question, ou au navigateur, si JS est désactivé, de pointer sur la bonne image si elles sont disposées en liste, les unes en-dessous des autres.

C'est bien ce qui me semblais, c'est pour ça aussi que je voulais rajouter un "!" avec le hash pour au moins pouvoir être référencer aussi.

à moins que tu ne veuilles qu'on puisse faire un lien vers une image précise.

Oui, en fait je souhaiterai qu'on puisse faire un lien vers une image précise surtout.

Modifié par MrMoche
Lien vers le commentaire
Partager sur d’autres sites

Salut,

J'ai lu l'article que tu as mis en lien dans ton premier message, et je pense que l'auteur parlait d'un cas très particulier, et pas du cas général. Car dans ton cas, le # n'a aucun rapport avec Ajax : il permet simplement de passer d'une image à l'autre au sein de la même page (c'est pour vérifier ça que je t'ai demandé l'url).

Ensuite, avec le javascript posé par-dessus, les liens avec # permettent d'afficher une image particulière tout en masquant les autres en jouant sur les styles CSS, c'est une technique assez courante. D'ailleurs si tu désactives le javascript, tu constateras que toutes les images se succèdent en grande taille les unes au-dessous des autres. C'est donc du simple javascript/css, il n'y a pas d'Ajax dans cette page ;)

La seule url que tu peux référencer dans Google est l'url de base de la page : http://devkick.com/lab/galleria/demo_01.htm Les autres urls (avec #) sont en réalité des ancres qui correspondent à des sous-parties de la page : il n'y a rien à faire pour le référencement. Google découvrira les images tout seul.

Lien vers le commentaire
Partager sur d’autres sites

Salut,

J'ai lu l'article que tu as mis en lien dans ton premier message, et je pense que l'auteur parlait d'un cas très particulier, et pas du cas général. Car dans ton cas, le # n'a aucun rapport avec Ajax : il permet simplement de passer d'une image à l'autre au sein de la même page (c'est pour vérifier ça que je t'ai demandé l'url).

Ensuite, avec le javascript posé par-dessus, les liens avec # permettent d'afficher une image particulière tout en masquant les autres en jouant sur les styles CSS, c'est une technique assez courante. D'ailleurs si tu désactives le javascript, tu constateras que toutes les images se succèdent en grande taille les unes au-dessous des autres. C'est donc du simple javascript/css, il n'y a pas d'Ajax dans cette page ;)

La seule url que tu peux référencer dans Google est l'url de base de la page : http://devkick.com/lab/galleria/demo_01.htm Les autres urls (avec #) sont en réalité des ancres qui correspondent à des sous-parties de la page : il n'y a rien à faire pour le référencement. Google découvrira les images tout seul.

Oui je l'avais fait en désactivant le JS, ok, donc je laisse comme ça puisqu'il n'y a pas grand chose à faire.

Merci à tous pour vos renseignements ;)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...